javascript - 【事件冒泡】和【事件捕获】

最新推荐文章于 2020-10-16 16:03:42 发布

遗失的徽章

最新推荐文章于 2020-10-16 16:03:42 发布

阅读量533

点赞数

分类专栏：技术类

本文链接：https://blog.csdn.net/SolemnKyle/article/details/47080271

版权

技术类专栏收录该内容

10 篇文章 0 订阅

订阅专栏

冒泡型事件

微软提出的名为事件冒泡(event bubbling)的事件流。事件会从最内层的元素开始发生，一直向上传播，直到document对象。事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。

捕获型事件

与事件冒泡相反，事件会从最外层开始发生，直到最具体的元素。事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)。

DOM事件流

同时支持两种事件模型：捕获型事件和冒泡型事件，但是，捕获型事件先发生。两种事件流会触及DOM中的所有对象，从document对象开始，也在document对象结束。

DOM事件模型最独特的性质是，文本节点也触发事件(在IE中不会)。

支持W3C标准的浏览器在添加事件时用

addEventListener(event,fn,useCapture);

第一个参数是需要绑定的事件

第二个参数是触发事件后要执行的函数

而第三个参数默认值是false，表示在事件冒泡的阶段调用事件处理函数，如果参数为true，则表示在事件捕获阶段调用处理函数。

<html>
<body>
<ul id="layer_1">
    <li id="layer_2">
	    <p id="layer_3">
	        <a id="layer_4">
		      Click_Me!
		 </a>
	   </p>
	</li>
</ul>
<script>
var num1 = document.getElementById("layer_1");
var num2 = document.getElementById("layer_2");
var num3 = document.getElementById("layer_3");
var num4 = document.getElementById("layer_4");
num1.addEventListener("click",function(){alert("1");},false);//当第三个参数为false时，冒泡执行处理事件
num2.addEventListener("click",function(){alert("2");},false);
num3.addEventListener("click",function(){alert("3");},false);
num4.addEventListener("click",function(){alert("4");},false);
</script>
</body>
</html>

执行结果为： 4->3->2->1 .

当false改为true ,执行结果正好相反：1->2->3->4.

遗失的徽章

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript - 【事件冒泡】和【事件捕获】

冒泡型事件微软提出的名为事件冒泡(event bubbling)的事件流。事件会从最内层的元素开始发生，一直向上传播，直到document对象。事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。捕获型事件与事件冒泡相反，事件会从最外层开始发生，直到最具体的元素。事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获
复制链接

扫一扫