JavaScript事件冒泡和事件捕获

最新推荐文章于 2024-04-04 00:42:02 发布

再加班就成仙

最新推荐文章于 2024-04-04 00:42:02 发布

阅读量159

点赞数

文章标签： javascript js html

本文链接：https://blog.csdn.net/weixin_44072399/article/details/115391653

版权

JavaScript 与 HTML 之间的交互是通过事件实现的。
事件流描述的是从页面中接收事件的顺序。

一、事件冒泡

IE 的事件流叫做事件冒泡（event bubbling），即事件开始时由最具体的元素（文档中嵌套层次最深
的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。以下面的 HTML 页面为例：

<!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 事件首先在

元素上发生，而这个元素就是我们单击的元素。然后，click事件沿 DOM 树向上传播，在每一级节点上都会发生，直至传播到 document 对象。图 13-1 展示了事件
冒泡的过程。

二、事件捕获
Netscape Communicator 团队提出的另一种事件流叫做事件捕获（event capturing）。事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预定目标之前捕获它。如果仍以前面的 HTML 页面作为演示事件捕获的例子，那么单击div元素就会以下列顺序触发 click 事件。
(1) document
(2) html
(3) body
(4) div
在事件捕获过程中，document 对象首先接收到 click 事件，然后事件沿 DOM 树依次向下，一直
传播到事件的实际目标，即

元素。

由于老版本的浏览器不支持，因此很少有人使用事件捕获。我们也建议读者放心地使用事件冒泡，
在有特殊需要时再使用事件捕获.

图解
在这里插入图片描述

注意：IE9、Opera、Firefox、Chrome 和 Safari 都支持 DOM 事件流；IE8 及更早版本不
支持 DOM 事件流。

再加班就成仙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript事件冒泡和事件捕获

JavaScript 与 HTML 之间的交互是通过事件实现的。事件流描述的是从页面中接收事件的顺序。一、事件冒泡IE 的事件流叫做事件冒泡（event bubbling），即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。以下面的 HTML 页面为例：<!DOCTYPE html> <html> <head> <title>Event Bubbling Example</tit
复制链接

扫一扫