实例2： 跟随鼠标的DIV--

<script>

document.onmousemove=function (ev)

{

	var oEvent=ev||event;

	var oDiv=document.getElementById('div1');

	var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;

	var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;

	oDiv.style.left=oEvent.clientX+scrollLeft+'px';

	oDiv.style.top=oEvent.clientY+scrollTop+'px';   //一般都要这么写，防止潜在的问题发生。oEvent.clientY+scrollTop

	//非谷歌浏览器情况下document.documentElement.scrollTop；谷歌浏览器情况下document.body.scrollTop;

};

</script>

实例3：offsetLeft

　　

<head>

<style>

#div1 {width:100px; height:100px; background:red; border:1px solid black; padding:10px; margin:20px; position:absolute; left:100px; top:100px;}

</style>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script>

window.onload=function ()

{

	var oDiv=document.getElementById('div1');

	alert(oDiv.offsetLeft);

};

</script>

</head>

<body>

<div id="div1"></div>

</body>

　　

js--事件对象的理解3的更多相关文章

  1. JavaScript学习06 JS事件对象

    JavaScript学习06 JS事件对象 事件对象:当事件发生时,浏览器自动建立该对象,并包含该事件的类型.鼠标坐标等. 事件对象的属性:格式:event.属性. 一些说明: event代表事件的状 ...

  2. JS事件对象,筋斗云导航练习,跟随鼠标练习,放大镜练习,进度条练习

    JS事件对象,筋斗云导航练习,跟随鼠标练习,放大镜练习,进度条练习 btn.onclick = function(event) { 语句 } 其中event就是事件对象,在这个方法中指向的对象是onc ...

  3. JS—事件对象

    在触发DOM上的某个事件时,会产生一个事件对象event.这个对象中包含着所有与事件有关的信息.包括导致事件的元素,事件的类型以及其他与特定事件相关的信息. 举例鼠标操作导致的事件对象中,会包含鼠标位 ...

  4. JS事件对象与事件委托

    事件对象 包含事件相关的信息,如鼠标.时间.触发的DOM对象等 js默认将事件对象封装好,并自动的以参数的形式,传递给事件处理函数的第1个参数,如下: document.getElementsByTa ...

  5. JS 事件对象和事件冒泡

    1.事件对象 js的事件对象中保存了当前被触发事件的一些相关的属性信息,如事件源.事件发生时的鼠标位置.事件按键等. 事件对象的获取方法: IE中可以window.event直接获取,而Firefox ...

  6. JS:事件对象1

    一,this关键字和上下文 var box = document.getElementById("box");. 普通的函数如果没有给他传递参数,函数本身是没有参数的. test( ...

  7. js事件对象--DOM中的事件对象/IE中的事件对象/跨浏览器的事件对象

    事件对象    在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息.包括导致事件的元素.事件的类型,以及其他与特定事件相关的信息.例如,鼠标操作导致的事件对 ...

  8. js事件对象

    哎,事件也有对象呦.程序员一直在讲对象对象,那么,过年是不是该带个对象回家呢?好了,既然事件有对象,承认这个事实吧!哈哈,那么,其就有属性,接下来,就放个 例子来讲讲,顺便把常用的属性也添加进去.. ...

  9. js 事件对象

    /* 事件绑定的格式: 元素节点.on + 事件类型 = function(){ } 元素节点 事件类型 on+事件类型:事件处理函数 [注]上述三者一绑定:生成一个新的事件对象. [注]触发事件以后 ...

  10. js 事件对象event

    在触发DOM上的某个事件时,会产生一个事件对象event.这个对象中包含着所有与事件有关的信息.包括导致事件的元素,事件的类型以及其他与特定事件相关的信息. <body> <a hr ...

随机推荐

  1. 队列Queue FIFO先进先出 栈Stack FILO先进后出

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  2. Docker集群实验环境布署--swarm【3 注册服务监控与自动发现组件--consul】

    参考官网集群配置方式 https://hub.docker.com/r/progrium/consul/   集群中需要manager与node能通信consul的发现服务,不然,管理节点选举不了,无 ...

  3. ubuntu 编译android源码

    1.https://mirrors.tuna.tsinghua.edu.cn/help/AOSP/                                   清华大学Android 镜像使用 ...

  4. chap1 C++泛型技术基础--模板 #STL

    0 缘起 有一点编程经验和积累,想系统的学习下STL,以前都是随意做的笔记,现在想着成主题的输出一下. 书的原型是ISBN:9787302421757 <C++泛型STL原理和应用>,是从 ...

  5. 修改release management client对应的服务器的地址

    参考资料:http://stackoverflow.com/questions/25313053/how-to-change-a-release-management-server-name-in-r ...

  6. [MFC美化] Skin++使用详解-使用方法及注意事项

    主要分为以下几个方面: 1.Skin++使用方法 2.使用中注意事项 一. Skin++使用方法 SkinPPWTL.dll.SkinPPWTL.lib.SkinPPWTL.h ,将三个文件及相应皮肤 ...

  7. zabbix 布署实践【2 agent安装】

    客户端的安装相对较为简单,主要是更新它的repo源   以CentOS7为例 rpm -ivh http://repo.zabbix.com/zabbix/3.0/rhel/7/x86_64/zabb ...

  8. DOM小解

    现在来说说DOM 文档对象模型DOM(Document Object Model)定义访问和处理html文档的标准方法.DOM将html文档呈现为带有元素   ,属性和文本的树结构(节点树) 先来看看 ...

  9. spring 四种依赖注入方式以及注解注入方式

    平常的java开发中,程序员在某个类中需要依赖其它类的方法,则通常是new一个依赖类再调用类实例的方法,这种开发存在的问题是new的类实例不好统一管理,spring提出了依赖注入的思想,即依赖类不由程 ...

  10. linux操作数据库

    1.显示数据库 show databases; 2.选择数据库 use 数据库名; 3.显示数据库中的表 show tables; 4.显示数据表的结构 describe 表名; 5.显示表中记录 S ...