js--事件对象的理解3

实例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>

  

时间: 2024-10-13 10:47:05

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

js事件对象坐标

js事件对象坐标---贴上代码 <body style="position:relative;width:100%;height:100%;padding:15px;margin:20px;"> <div style="position:absolute;top:100px;left:100px;width:500px;height:500px;padding:5px;margin:9px;background:#ddd;" onclick=&qu

Js事件对象EventUtil

1 var EventUtil = { 2 getEvent: function(event){ //获取事件对象 3 return event ? event : window.event; 4 }, 5 addHandler: function(element, type, handler){ //绑定事件 6 if (element.addEventListener) { 7 element.addEventListener(type, handler, false); 8 } else

JS 事件对象和事件冒泡

1.事件对象 js的事件对象中保存了当前被触发事件的一些相关的属性信息,如事件源.事件发生时的鼠标位置.事件按键等. 事件对象的获取方法: IE中可以window.event直接获取,而Firefox中则不可以,可通过如下方法获取: 1)var event = window.event || arguments.callee.caller.arguments[0]; 2)通过参数传.function(e) { var event = window.event || e; } 2.事件源 事件源即

JS—事件对象

事件对象: 在触发DOM事件的时候都会产生一个对象 事件对象Event: 1)type:获取事件类型 2)target:获取事件目标 3)stopPropagation():阻止事件冒泡 4)preventDefault():阻止事件默认行为 <div id="div"> <button id="btn">按钮</button> <a href="www.baidu.com" id="aid&q

JS:事件对象1

一,this关键字和上下文 var box = document.getElementById("box");. 普通的函数如果没有给他传递参数,函数本身是没有参数的. test();  //0 function test () { alert(arguments.length); } 但是在事件对象中是有参数的,他是通过浏览器把这个对象作为参数传递过来的.  box.onclick = function() { alert(arguments.length);// 1 alert(a

js事件对象

哎,事件也有对象呦.程序员一直在讲对象对象,那么,过年是不是该带个对象回家呢?好了,既然事件有对象,承认这个事实吧!哈哈,那么,其就有属性,接下来,就放个 例子来讲讲,顺便把常用的属性也添加进去.. Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 事件通常与函数结合使用,函数不会在事件发生前被执行 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&

js事件对象兼容性写法

dom0级事件处理时,使用属性方式注册事件处理函数: IE8和IE8以下浏览器不能传递参数,只能使用window.event对象.谷歌浏览器既可以传递事件对象参数,也可以使用window.envent对象火狐浏览器只能使用传递的事件对象参数. 兼容写法: function fn(e){ e=e||window.event; alert(e.type); }  

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

事件对象    在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息.包括导致事件的元素.事件的类型,以及其他与特定事件相关的信息.例如,鼠标操作导致的事件对象中,会包含鼠标位置的信息,而键盘操作导致的事件对象中,会包含与按下的键有关的信息.所有浏览器对象都支持event对象,但支持方式不同. DOM中的事件对象 兼容DOM的浏览器会将一个event对象传入到事件处理程序中.无论指定事件处理程序时使用什么方法(DOM0级或DOM2级),都会传入event

JS 事件对象

事件对象 事件处理函数的一个标准特性是,以某些方式访问的事件对象包含有关于当前事件的上 下文信息. 事件处理三部分组成:对象.事件处理函数=函数.例如:单击文档任意处. document.onclick = function () { alert('Lee'); }; PS:以上程序的名词解释:click 表示一个事件类型,单击.onclick 表示一个事件处理 函数或绑定对象的属性(或者叫事件监听器.侦听器).document 表示一个绑定的对象,用于 触发某个元素区域.function()匿

JS事件对象 (event)

#事件对象 (event) div.onclick = function(event){ console.log(event); let e = event||window.event;解决兼容性 } ##事件对象的属性 1)target 目标对象:e.target(获取触发事件的元素) 2)this 指向绑定的元素 ###鼠标相关的属性 1)相对于浏览器(文档显示区)的坐标:clientX.clientY 2) 相对于页面的坐标:pageX.pageY:如果有滚动条,会计算隐藏的坐标 3)相对