《JS高程（3）》事件-事件流第13章笔记(26)

最新推荐文章于 2022-09-06 11:42:39 发布

ymc_Webpack

最新推荐文章于 2022-09-06 11:42:39 发布

阅读量277

点赞数 1

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

本文链接：https://blog.csdn.net/ymc_webpack/article/details/56672896

版权

JavaScript 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

JavaScript与HTML之间的交互是通过事件实现的。

事件：文档或浏览器窗口中发生的一些特定的交互瞬间。

事件流

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

事件冒泡

IE事件流：事件冒泡，即事件开始时由最具图的元素（文档中嵌套层次最深的节点）接受，然后逐级向上传播到较为不具体的节点（文档）。
例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div id = "myDiv">Click Me</div>
</body>
</html>

点击click事件传播顺序：
(1)< div>
(2)< body>
(3)< html>
(4)< document>

所有浏览器都支持事件冒泡，但在具体实现上还是有一些差距。
IE9、Firefox、Chrome、Safari事件一直冒泡到window对象。

事件捕获

Netscape Communicator团队提出的另一种事件流叫做事件捕获（event capturing）。
事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接受到事件。事件捕获的用意在于在事件到达预定目标之前捕获它。以前面的HTML为例，单击<div>元素的触发click事件顺序：
(1)document
(2)< html>
(3)< body>
(4)< div>

事件捕获很少使用

DOM事件流

“DOM2事件流”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。

首先发生的是事件捕获，为截获事件提供了机会。

然后是实际的目标接收到事件。

最后是冒泡阶段，可以在这个阶段对事件作出响应。

在DOM事件流中，实际的目标在捕获阶段不会接收到事件，在捕获阶段，事件从document到< html>再到< body>后就停止了。下个阶段“处于目标“阶段，于是事件在< div>上发生，并在事件处理中被看成冒泡阶段的一部分。然后，冒泡阶段发生，事件又传播回文档。

阻止事件冒泡

事件冒泡过程，是可以被阻止的。防止事件冒泡而带来不必要的错误和困扰。
方法:stopPropagation()

ymc_Webpack

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《JS高程（3）》事件-事件流第13章笔记(26)

JavaScript与HTML之间的交互是通过事件实现的。事件：文档或浏览器窗口中发生的一些特定的交互瞬间。事件流事件流：描述从页面接收事件的顺序。事件冒泡IE事件流：事件冒泡，即事件开始时由最具图的元素（文档中嵌套层次最深的节点）接受，然后逐级向上传播到较为不具体的节点（文档）。例：<!DOCTYPE html><html lang="en"><head> <meta charse
复制链接

扫一扫