IE实现的DOM事件流

IE实现的DOM事件流

今天突然看到了IE中的event，于是想起来了DOM中的事件流。原来大概知道IE实现了冒泡的事件流模型。但是具体怎么样却忘记了。“好奇害死猫”啊——为了这个临时的问题花了一个多小时啊。下面先介绍IE5.5以上实现的事件流模型。

冒泡模型：DOM模型是一个树状模型，举例来说，如下面的代码

 

<div onclick="alert('div1')">
       <a onclick="alert('a1'); ">aaa</a>
</div>

 

div里面嵌套了一个a标签。冒泡模型指的就是事件会从内部的对象逐渐向外部传递。对于上面的代码，点击链接aaa，那么首先会执行<a>的onclick事件弹出“a1”，然后是<div>的onclick事件弹出”div1”。IE提供了取消事件“冒泡”的机制，即设置event.cancelBubble=true，默认这个值为false，即事件冒泡传递。下面的代码将只会执行<a>的onclick事件。

<div onclick="alert('div1')">
  <a onclick="alert('a1'); event.cancelBubble=true;">aaa</a>
</div>

 

 

注意这里设置的取消事件冒泡传递只是针对于当前的事件。具体说来如下面的代码：

 

<script>var g = 0;</script>       
<div onclick="alert('div1')">
<a onclick="alert('a1'); if(g++ == 0)event.cancelBubble=true;">aaa</a>
</div>

 

 

第一次点击链接的时候,全局变量g==0，所以会取消事件向外传递，也就是div的onclick事件不会执行，此时g=1。第二次点击链接的时候，不会再设置event.cancelBubble=true，所以事件仍然向外传递，即div的onclick事件会执行。

 

       捕获模型：如果要动态添加或删除DOM元素的事件处理函数的话，用上面的方法肯定是不方便的。因此每个对象都有attachEvent和detachEvent两个方法用于增加和移除事件绑定。微软DHTML帮助文档对attachEvent方法的描述如下：

bSuccess = object.attachEvent(sEvent, fpNotify)

Syntax

        bSuccess = object.attachEvent(sEvent, fpNotify)

Parameters

sEvent

Required. String that specifies any of the standard DHTML Events.

fpNotify

Required. Pointer that specifies the function to call when sEvent fires.

Return Value

Boolean. Returns one of the following possible values:

true

The function was bound successfully to the event.

false

The function was not bound to the event.

Remarks

When sEvent fires on the object, the object's sEvent handler is called before fpNotify , the specified function. If you attach multiple functions to the same event on the same object, the functions are called in random order, immediately after the object's event handler is called.

上面说的关键点是捕获事件(fpNotify)在原始事件(sEvent)之后响应，如果捕获事件绑定多个函数的话，不能保证这些函数的执行顺序。

对于下面的代码：

<script>var g = 0;</script>  
<div onclick="alert('div1')">
<a onclick="alert('a1'); if(g++ == 0)event.cancelBubble=true;">aaa</a>
</div>
<script>
document.all.tags("a")[0].attachEvent("onclick", function (){alert("a2");});
document.all.tags("a")[0].attachEvent("onclick", function (){alert("a3");});
document.all.tags("a")[0].attachEvent("onclick", function (){alert("a4");});
</script>

 

 

在我的浏览器IE6中，点击链接首先会弹出”a1”，然后分别弹出”a3”,”a4”,”a2”。

 

FireFox等其他浏览器多半实现的是DOM2的标准事件流，与IE自家的不一致，以后再介绍。

 
<script type="text/javascript"><!--google_ad_client = "pub-1992382271196226";google_ad_width = 468;google_ad_height = 60;google_ad_format = "468x60_as_rimg";google_cpa_choice = "CAEQ_ZOgnAIQABoIjhOlodMli9UomcD3cyiZwPdzMAA";//--></script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>