事件冒泡和事件捕获

最新推荐文章于 2022-02-22 11:38:38 发布

impact_factor

最新推荐文章于 2022-02-22 11:38:38 发布

阅读量69

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/impact_factor/article/details/117844843

版权

事件流事件冒泡事件捕获 DOM JavaScript

关键词由CSDN通过智能技术生成

JavaScript 专栏收录该内容

23 篇文章 5 订阅

订阅专栏

事件冒泡和事件捕获

1. 事件冒泡：
2. 事件捕获：

1. 事件冒泡：

IE 事件流被称为事件冒泡，这是因为事件被定义为从最具体的元素（文档树中最深的节点）开始触发，然后向上传播至没有那么具体的元素（文档）。比如有如下 HTML 页面：

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

在点击页面中的元素后，click 事件会以如下顺序发生：
(1)<div>
(2)<body>
(3)<html>
(4)document
也就是说<div>元素，即被点击的元素，最先触发 click 事件。然后，click 事件沿 DOM 树一路向上，在经过的每个节点上依次触发，直至到达 document 对象。
在这里插入图片描述

2. 事件捕获：

事件捕获的意思是最不具体的节点应该最先收到事件，而最具体的节点应该最后收到事件。事件捕获实际上是为了在事件到达最终目标前拦截事件。如果前面的例子使用事件捕获，则点击元素会以下列顺序触发 click 事件：
(1) document
(2) <html>
(3) <body>
(4) <div>
事件捕获中，click 事件首先由 document 元素捕获，然后沿 DOM 树依次向下传播，直至到达实际的目标元素。
在这里插入图片描述