JavaScript Event学习第八章：事件的顺序

　2010-03-30 00:00:00　来源：WEB开发网　　　

核心提示： 假设你这样写1element1.addEventListener('click',doSomething2,true) element2.addEventListener('click',doSomething,false) 如

假设你这样写

1　element1.addEventListener('click',doSomething2,true) element2.addEventListener('click',doSomething,false) 

如果用户在element2上单击就会发生下面的事情：

1、click事件发生在捕获阶段。这样看来，如果element2的任何一个父元素有onclick事件处理程序那么都会执行。

2、事件在element1上发现了doSomething2()，那么就会执行它。

3、事件向下传递直到目标本身，再没有其他的捕获阶段程序了。事件转而进入冒泡阶段然后就会执行doSomething()，也就是element2注册在冒泡阶段的事件处理程序。

4、事件再向上传递再检查是否有父元素在冒泡阶段设置事件处理程序。这里没有，所以什么也不会发生。

反过来：

1　element1.addEventListener('click',doSomething2,false) element2.addEventListener('click',doSomething,false) 

现在如果用户在element2上面点击就会发生：

1、事件click发生在捕获阶段。事件会查找element2的父元素是否有在捕获阶段注册事件处理程序，在这里没有。

2、事件向下传递直到目标本身。然后开始冒泡阶段，执行dosomething()，这个是注册在element2冒泡阶段的事件处理程序。

3、事件继续向上传递然后检查是否有父元素在冒泡阶段注册了事件处理程序。

4、事件发现了element1.然后doSomething2()就被执行了。

传统模式下的兼容性

对于那些支持W3C DOM的浏览器来说，传统的事件注册

1　element1.onclick　=　doSomething2; 

就被看做是注册在冒泡阶段的。

事件冒泡的使用

编缉推荐阅读以下文章

编辑录入：爽爽　[复制链接] [打印]