js事件（一）之事件流

最新推荐文章于 2022-10-20 19:47:59 发布

isNemo

最新推荐文章于 2022-10-20 19:47:59 发布

阅读量145

点赞数

本文链接：https://blog.csdn.net/Queue_ningmeng/article/details/88275251

版权

js事件（一）之事件流

1.事件流定义

事件发生时会在元素节点与根节点之间按照特定的顺序传播，路径所经过的所有节点都会收到该事件，这个传播过程即DOM事件流。

事件传播的顺序对应浏览器的两种事件流模型：捕获型事件流和冒泡型事件流。

冒泡型事件流：事件的传播是从最特定的事件目标到最不特定的事件目标。即从DOM树的叶子到根。

捕获型事件流：事件的传播是从最不特定的事件目标到最特定的事件目标。即从DOM树的根到叶子。

2.举个栗子

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>事件流</title>
 6         <style>
 7             div{width: 300px;height: 300px;background: darkcyan;}
 8             section{width: 200px;height: 200px;background: orange;}
 9             p{width: 100px;height: 100px;background:tomato;}
10         </style>
11     </head>
12     <body>
13         <div id="grandfather">
14             爷爷
15             <section id="father">
16                 爸爸
17                 <p id="son">儿子</p>
18             </section>
19         </div>
20     </body>
21     <script>
22         var grand  = document.getElementById('grandfather'),
23             father = document.getElementById('father'),
24             son    = document.getElementById('son');
25         son.onclick = function(){
26             alert('son');
27         }
28         father.onclick = function(){
29             alert('father');
30         }
31         grand.onclick = function(){
32             alert('grand');
33         }
34         
35     </script>
36 </html>

执行结果如下：(先后弹出son，father，grand界面)

在冒泡型事件流中click事件传播顺序为div=>body=>html=>document

在捕获型事件流中click事件传播顺序为document=>html=>body=>div

如图：

注意：

注意：

1、所有现代浏览器都支持事件冒泡，但在具体实现中略有差别：

IE5.5及更早版本中事件冒泡会跳过<html>元素(从body直接跳到document)。
IE9、Firefox、Chrome、和Safari则将事件一直冒泡到window对象。

2、IE9、Firefox、Chrome、Opera、和Safari都支持事件捕获。尽管DOM标准要求事件应该从document对象开始传播，但这些浏览器都是从window对象开始捕获事件的。

3、由于老版本浏览器不支持，很少有人使用事件捕获。建议使用事件冒泡。

DOM标准规定事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。

事件捕获阶段：实际目标（<div>）在捕获阶段不会接收事件。也就是在捕获阶段，事件从document到<html>再到<body>就停止了。

处于目标阶段：事件在<div>上发生并处理。但是事件处理会被看成是冒泡阶段的一部分。

冒泡阶段：事件又传播回文档。

DOM2级事件 addEventListener() 和 removeEventListener()是用来分配和删除事件的函数。这两个方法都需要三个参数，分别为：事件名称（String）、要触发的事件处理函数(Function)、指定事件处理函数的时期或阶段(boolean)。

由上图可知，捕获过程要先于冒泡过程。

第三个参数就是是否支持事件捕获，true支持事件捕获，false支持事件冒泡。

posted @ 2016-10-18 16:31 _只鱼阅读( ...) 评论( ...) 编辑收藏

isNemo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js事件（一）之事件流

js事件（一）之事件流 1.事件流定义事件发生时会在元素节点与根节点之间按照特定的顺序传播，路径所经过的所有节点都会收到该事件，这个传播过程即DOM事件流。事件传播的顺序对应浏览器的两种事件流模型：捕获型事件流和冒泡型事件流。冒泡型事件流：事件的传播是从最特定的事件目标到最不特定的事件目标。即从DOM树的叶子到根。捕获型事件流：事件...
复制链接

扫一扫