DOM模型事件传播机制应用

最新推荐文章于 2022-02-24 19:18:33 发布

chengqiuming

最新推荐文章于 2022-02-24 19:18:33 发布

阅读量498

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/chengqiuming/article/details/78600083

版权

HTML5 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

一介绍

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>

三运行结果

查看图片附件

chengqiuming

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM模型事件传播机制应用

一介绍DOM模型事件传播先后沿着两个方向传播：在第一阶段，也就是事件捕获阶段，事件从最顶层的对象依次向下传播，因此先触发顶层对象的事件处理函数，然后依次向下，直到传播到事件所发生的最底层对象；接着进入第二阶段，也就是事件冒泡阶段，事件传播一直向上溯，直到最顶层对象。DOM模型事件传播机制模型如下图 DOM为Event对象提供了stoppropagation（）方法，该方法能阻止
复制链接

扫一扫