javascript中的事件流

最新推荐文章于 2023-01-10 15:37:26 发布

出于蓝

最新推荐文章于 2023-01-10 15:37:26 发布

阅读量298

点赞数

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

本文链接：https://blog.csdn.net/orq18810575870/article/details/79897839

版权

27 篇文章 0 订阅

订阅专栏

1 事件冒泡:

IE中得事件流叫做事件冒泡,就是事件最开始的元素接收,然后逐级向上传播到不具体的节点,举个例子:

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

如果点击了<div>元素后,那么click事件就会按照下面的顺序传播:

div->body->html->document

冒泡的过程如下图所示:

2 事件捕获:

事件捕获的思想是不太具体的节点应该早一点接收到事件,而最具体的节点放在谁后面.以便在事件达到预定的目标之前捕获它.举个例子:

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

点击div元素后,那个click会按照下面的顺序传播:

document->html->body->div

如图所示:

3 DOM事件流:

事件流包括三个阶段:

事件捕获阶段,处于目标阶段,事件冒泡阶段.首先是事件捕获,为截获事件提供了机会,然后是实际目标接收事件,最后是冒泡阶段,可以在这个阶段对事件作出相应.

还是以前面的例子为例,点击div时候的事件流如图所示:

在DOM 事件流中，实际的目标（<div>元素）在捕获阶段不会接收到事件。这意味着在捕获阶段，事件从document 到<html>再到<body>后就停止了。下一个阶段是“处于目标”阶段，于是事件在<div>上发生,并在事件处理中被看成冒泡阶段的一部分。

关注

专栏目录