前端关于dom事件流

最新推荐文章于 2022-07-02 00:57:17 发布

爱长发的短发小二哥

最新推荐文章于 2022-07-02 00:57:17 发布

阅读量236

点赞数 1

文章标签： javascript html 前端 js

本文链接：https://blog.csdn.net/John_jian_yo/article/details/107062580

版权

定义

DOM(文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素节点与根结点之间的路径传播，路径所经过的结点都会收到该事件，这个传播过程可称为DOM事件流。

DOM事件流模型

在DOM兼容浏览器中，事件流分为3个阶段：

（1）捕获阶段：事件从Document节点自上而下向目标节点传播的阶段；

（2）目标阶段：真正的目标节点正在处理事件的阶段；

（3）冒泡阶段：事件从目标节点自下而上向Document节点传播的阶段。

独特性质

DOM事件流最独特的性质是，文本节点也触发事件（在IE中不会），当鼠标单击“单击此文本”文本时会触发click事件，该事件的捕获阶段最先开始，从Document节点开始逐渐向下传播，直到“单击此文本”文本节点，事件进入目标阶段，在目标阶段结束之后，事件由“单击此文本”文本节点开始事件的冒泡阶段，直到Document节点为止。

另外，需要说明的是，有些事件是可以取消的，在整个事件流的任何位置通过调用事件的stopPropagation方法可以停止事件的传播过程。

事件冒泡

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件冒泡</title>
</head>
<body>
    <div>
        <p>
           <text>点我</text>
        </p>
    </div>
</body>
</html>

顺序：text → p → div → body → html → document

事件捕获顺序刚好相反：document → html → body → div → p → text

爱长发的短发小二哥

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端关于dom事件流

定义DOM(文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素节点与根结点之间的路径传播，路径所经过的结点都会收到该事件，这个传播过程可称为DOM事件流。DOM事件流模型在DOM兼容浏览器中，事件流分为3个阶段：（1）捕获阶段：事件从Document节点自上而下向目标节点传播的阶段；（2）目标阶段：真正的目标节点正在处理事件的阶段；（3）冒泡阶段：事件从目标节点自下而上向Document节点传播的阶段。独特性质DOM事件流最独特的性质是，.
复制链接

扫一扫