一 介绍
DOM模型事件传播先后沿着两个方向传播:在第一阶段,也就是事件捕获阶段,事件从最顶层的对象依次向下传播,因此先触发顶层对象的事件处理函数,然后依次向下,直到传播到事件所发生的最底层对象;接着进入第二阶段,也就是事件冒泡阶段,事件传播一直向上溯,直到最顶层对象。
DOM模型事件传播机制模型如下图
DOM为Event对象提供了stoppropagation()方法,该方法能阻止事件传播。
二 代码
<!DOCTYPE html> <html> <head> <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)"/> <meta http-equiv="Content-Type" content="text/html; charset=GBK"/> <title>阻止事件传播</title> </head> <body> 友情链接:<br /> <!--目标超链接--> <a id="mylink" href="http://www.crazyit.org">疯狂Java联盟</a> <div id="show"></div> <script type="text/javascript"> // 事件捕获阶段的处理函数 var killClick1 =function(event) { // 取消默认事件的默认行为 event.preventDefault(); // 阻止事件传播 event.stopPropagation(); document.getElementById("show").innerHTML +='事件捕获阶段'+ event.currentTarget +"<br />"; } //事件冒泡阶段的处理函数 var killClick2 =function(event) { // 取消事件的默认行为 event.preventDefault(); // 阻止事件传播 event.stopPropagation(); document.getElementById("show").innerHTML +='事件冒泡阶段'+ event.currentTarget +"<br />"; } // // 在事件捕获阶段,分别为超链接对象、document对象绑定事件处理函数。 document.addEventListener("click", killClick1,true); document.getElementById("mylink").addEventListener( "click", killClick1,true); // 在事件冒泡阶段,分别为超链接对象、document对象绑定事件处理函数。 document.addEventListener("click", killClick2,false); document.getElementById("mylink").addEventListener( "click", killClick2,false); </script> </body> </html>
三 运行结果