事件之事件流

最新推荐文章于 2022-02-13 16:51:48 发布

废废的肥阳

最新推荐文章于 2022-02-13 16:51:48 发布

阅读量813

点赞数

本文链接：https://blog.csdn.net/xiaoyangzhu/article/details/121910596

版权

打卡《JavaScript高级程序设计(第四版）》专栏收录该内容

40 篇文章 0 订阅

订阅专栏

一事件流

定义：事件流描述了页面接收事件的顺序

全文示例

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

二事件冒泡

定义：事件被定义为从最具体的元素（文档树中最深的节点）开始触发，然后向上传播至没有那么具体的元素（文档）

点击事件顺序发生：

(1) <div>

(2) <body>

(3) <html>

(4) document

触发描述：

<div>元素，即被点击的元素，最先触发 click 事件。然后，click 事件沿 DOM 树一路向上，在经过的每个节点上依次触发，直至到达 document 对象

三事件捕获

定义：事件捕获的意思是最不具体的节点应该最先收到事件，而最具体的节点应该最后收到事件。事件捕获实际上是为了在事件到达最终目标前拦截事件

所有浏览器捕获事件

DOM 都是从 window 对象开始，
DOM2 Events规范规定的是从 document 开始

点击事件顺序发生：

(1) document

(2) <html>

(3) <body>

(4) <div>

触发描述：

在事件捕获中，click 事件首先由 document 元素捕获，然后沿 DOM 树依次向下传播，直至到达实际的目标元素

四 DOM事件流

定义：DOM2 Events 规范规定事件流分为 3 个阶段：事件捕获、到达目标和事件冒泡。

事件捕获最先发生，为提前拦截事件提供了可能。
然后，实际的目标元素接收到事件。
最后一个阶段是冒泡，最迟要在这个阶段响应事件。

触发描述：

在 DOM 事件流中，实际的目标（<div>元素）在捕获阶段不会接收到事件。

这是因为捕获阶段从 document 到 <html> 再到 <body> 就结束了。

下一阶段，即会在 <div> 元素上触发事件的“到达目标” 阶段，通常在事件处理时被认为是冒泡阶段的一部分（稍后讨论）

然后，冒泡阶段开始，事件反向传播至文档