[JavaScript]Event对象与时间传播机制

Event对象：当触发某个事件时，会产生一个Event类的instance，它包含描述时间的若干属性。

对于遵从标准的浏览器来说，浏览器在执行时间处理器时，会将Event对象作为第一个参数传递给事件处理函数。在IE中，则可通过窗口对象（window）的event属性读取该对象。

Eg:

<html>

<head>

<title>Events</title>

<script type="text/javascript" >

window.onload = function(){

document.getElementById("anImage").onclick = function(event){

if(!event){

event = window.event;

}

var target = event.target?event.target:event.srcElement;

document.getElementById("info").innerHTML += "I woof at " + target.id + " !<br />";

}

}

</script>

</head>

<body>

<img src="image.png" id="anImage" >

<div id="info"></div>

</body>

</html>


事件传播

在遵从标准的支持DOM Level2事件模型的浏览器中，一个事件被触发后包含三个处理阶段：捕获阶段、目标阶段和冒泡阶段。

事件从文档节点（document）向下遍历DOM树，直到目标元素。事件经过一个元素时，每一个为该事件类型而安置到该元素上的事件处理器都会被调用——前提是该事件处理器属于捕获处理器。还记得addEventListener()的第三个参数吗？如果该参数设置为true，则事件处理器被注册为捕获处理器，如果该参数设置为false，则事件处理器被注册为冒泡处理器。

事件自上而下遍历并激发所有对应的捕获处理器，一旦到达目标元素，事件就进入到目标阶段。在该阶段，安置于目标元素本身的相关处理器将被激发。如果同时安置了捕获处理器和冒泡处理器，所有这些事件处理器都会被调用。

然后事件将反向传播，从目标沿着DOM树“冒泡”至document节点，沿途经过的元素上所有为该事件安置的冒泡处理器都将会被触发。

IE仅支持目标和冒泡处理器，在IE中没有addEventListener()函数，ie使用attachEvent()添加事件监听。

停止事件传播

在遵从标准的浏览器中，可在事件处理器内调用Event类的stopPropagation()方法来阻止当前事件继续传播。在IE中，则需要将Event实例的cancelBubble属性设置为true。

阻止默认操作

在DOM Level 0模型中，事件处理器可返回false来取消默认操作

在DOM Level 2模型中，Event类的preventDefault()方法具有相同作用

在IE中，则是将Event实例的returnValue属性设置为false

posted @ 2010-12-28 19:57  MagicLetters  阅读(105)  评论(0)    收藏  举报