DOM模型事件传播机制应用

来源：互联网发布：java招聘编辑：程序博客网时间：2024/05/18 17:27

一介绍

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>

三运行结果

查看图片附件

阅读全文

0 0