javascript的事件捕获和事件冒泡

W3C规范对于脚本事件有两种处理方式,第一种为冒泡模型,第二种是事件捕获模型,前者为早期浏览器所支持的(也称DOM 0标准),后者为W3C规范推荐的方法(也称DMO 2标准).

其主要区别:

@1:事件捕获不依赖于特定的事件来处理属性

@2:你可以对任何对象的任何一种事件注册多个事件句柄函数

第一个javascript程序 <script type="text/javascript"> function cascadeDown(event){ alert("capturing" + this); } function bubleUp(event){ alert("bubleUp" + this); } function setup(){ //事件捕获 document.addEventListener("click",cascadeDown,true);//以捕获事件方式 document.forms[0].addEventListener("click",cascadeDown,true); document.forms[0].elements[0].addEventListener("click",cascadeDown,true); //事件冒泡 document.addEventListener("click", bubleUp, false); document.forms[0].addEventListener("click",bubleUp,false); document.forms[0].elements[0].addEventListener("click",bubleUp,false); } window.onload = setup; </script>

上述代码的执行结果为:

javascript的事件捕获和事件冒泡

vcD4KPGgyIGNsYXNzPQ=="headline-1">冒泡事件流:

当事件在某一DOM元素被触发时,例如用户在客户名字节点上点击鼠标,事件将跟随着该节点继承自的各个父节点冒泡穿过整个的DOM节点层次,直到它遇到依附有该事件类型处理器的节点,此时,该事件是onclick事件。在冒泡过程中的任何时候都可以终止事件的冒泡,在遵从W3C标准的浏览器里可以通过调用事件对象上的stopPropagation()方法,在Internet Explorer里可以通过设置事件对象的cancelBubble属性为true。如果不停止事件的传播,事件将一直通过DOM冒泡直至到达文档根

捕获事件流:

事件的处理将从DOM层次的根开始,而不是从触发事件的目标元素开始,事件被从目标元素的所有祖先元素依次往下传递。在这个过程中,事件会被从文档根到事件目标元素之间各个继承派生的元素所捕获,如果事件监听器在被注册时设置了useCapture属性为true,那么它们可以被分派给这期间的任何元素以对事件做出处理;否则,事件会被接着传递给派生元素路径上的下一元素,直至目标元素。事件到达目标元素后,它会接着通过DOM节点再进行冒泡。

分类:默认分类 时间:2015-03-13 人气:5
本文关键词:
分享到:

相关文章

Copyright (C) quwantang.com, All Rights Reserved.

趣玩堂 版权所有 京ICP备15002868号

processed in 0.039 (s). 10 q(s)