一 介绍
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>
三 运行结果
