js--事件对象的理解2

实例1：一串跟着鼠标飞舞的div

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
div {width:10px; height:10px; background:red; position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>一串跟着鼠标飞舞的div </title>
<script>
window.onload=function ()
{
	var aDiv=document.getElementsByTagName(‘div‘);
	var i=0;
	document.onmousemove=function (ev)
	{
		var oEvent=ev||event; //兼容浏览器的事件对象的写法，event是IE的写法，传参是火狐的写法

		for(i=aDiv.length-1;i>0;i--)
		{
			aDiv[i].style.left=aDiv[i-1].style.left;
			aDiv[i].style.top=aDiv[i-1].style.top;
		}

		aDiv[0].style.left=oEvent.clientX+‘px‘;
		aDiv[0].style.top=oEvent.clientY+‘px‘;
	};
};
</script>
</head>

<body>
<div></div>
<div></div>
<div></div>

<!--------------此处省略很多div-------->
</body>
</html>

　　2.document是<!DOCTYPE 和html标签的父级

时间： 2024-11-13 09:43:25

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

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)相对