DOM模型事件传播机制应用

cakin24

浏览: 1328550 次
性别:
来自: 西安

最近访客更多访客>>

leimingchao

zhaojunlin

颜熙啊哈

jiabingno1

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2017-11 ( 30)
2017-10 ( 128)
2017-09 ( 144)
更多存档...

博客分类：

JavaScript

DOM 模型事件传播机制

一介绍

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>

三运行结果