JavaScript事件流-怎么控制在捕获阶段还是冒泡阶段调用事件处理程序

最新推荐文章于 2024-01-28 16:11:51 发布

cake_eat

最新推荐文章于 2024-01-28 16:11:51 发布

阅读量525

点赞数 1

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/cake_eat/article/details/108753564

版权

94 篇文章 1 订阅

订阅专栏

事件流描述的是从页面中接收事件的顺序。

由最具体的元素接收，然后珠玑传播到较为不具体的节点。
例如：

<!DOCTYPE html> 
<html> 
<head>     
<title>Event Bubbling Example</title> 
</head> 
<body>     
<div id="myDiv">Click Me</div> 
</body> 
</html>

如果单击<div>元素，那么click事件将会按照如下顺序传播。
（1）<div>
（2）<body>
（3）<html>
（4）document

在这里插入图片描述

不太具体的节点应该更早接收到事件，而具体的节点应该后接收到事件。

以上面的例子为例：
如果你单击了页面中的

元素，那么这个 click 事件会按照如下顺序传播：
(1) document
(2) <html>
(3) <body>
(4) <div>
在这里插入图片描述

事件流包括三个阶段：事件捕获阶段。处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，为截获事件提供了机会。然后是实际的目标接收到事件。后一个阶段是冒泡阶段，可以在这个阶段对事件做出响应。
在这里插入图片描述

“DOM2级事件”定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener() 和 removeEventListener()。

所有 DOM节点中都包含这两个方法，并且它们都接受 3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。这个布尔值参数如果是 true，表示在捕获阶段调用事件处理程序；如果是 false，表示在冒泡阶段调用事件处理程序。

大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段，这样可以大限度地兼容各种浏览器。最好只在需要在事件到达目标之前截获它的时候将事件处理程序添加到捕获阶段。如果不是特别需要，不建议在事件捕获阶段注册事件处理程序。

关注

专栏目录