DOM事件流

Moony (考研版)

已于 2022-02-07 20:16:40 修改

阅读量2k

点赞数 2

分类专栏： js 文章标签： javascript 前端 dom

于 2022-02-07 20:12:17 首次发布

本文链接：https://blog.csdn.net/Moony_wy/article/details/122813290

版权

js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

什么是DOM事件流

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

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。

DOM事件流分为3个阶段：

1. 捕获阶段

2. 当前目标阶段

3. 冒泡阶段

比如我们给一个div注册了点击事件：

注意：

1. JS代码中只能执行捕获或者冒泡其中一个阶段

2. onclick 和 attachEvent 只能得到冒泡阶段

3. 如果 addEventListener 第三个参数是true处于捕获阶段，false或省略处于冒泡阶段

4. 实际开发中我们更关注事件冒泡

5. 有些事件是没有冒泡的，比如 onblur, onfocus, onmouseenter, onmouseleave

捕获阶段

如果 addEventListener 第三个参数是true，则处于捕获阶段。

捕获阶段：document -> html -> body -> father -> son

<body>
    <div class="father">
        <div class="son">son</div>
    </div>
    <script>
        // dom 事件流
        // 1. JS代码中只能执行捕获或者冒泡其中一个阶段
        // 2. onclick 和 attachEvent 只能得到冒泡阶段
        // 3. 如果 addEventListener 第三个参数是true 处于捕获阶段
        // document -> html -> body -> father -> son
        var father = document.querySelector('.father');
        var son = document.querySelector('.son');
        son.addEventListener('click', function() {
            alert('son');
        }, true);
        father.addEventListener('click', function() {
            alert('father');
        }, true);
    </script>
</body>

以上代码点击son盒子会先弹出father再弹出son。

冒泡阶段

如果 addEventListener 第三个参数是false或省略，则处于冒泡阶段。

冒泡阶段：son -> father -> body -> html -> document

<body>
    <div class="father">
        <div class="son">son</div>
    </div>
    <script>
        // dom 事件流
        // 1. JS代码中只能执行捕获或者冒泡其中一个阶段
        // 2. onclick 和 attachEvent 只能得到冒泡阶段
        // 3. 如果 addEventListener 第三个参数是false或省略 处于冒泡阶段
        // son -> father -> body -> html -> document
        var father = document.querySelector('.father');
        var son = document.querySelector('.son');
        son.addEventListener('click', function() {
            alert('son');
        }, false);
        father.addEventListener('click', function() {
            alert('father');
        }, false);
        document.addEventListener('click', function() {
            alert('document');
        });
    </script>
</body>

以上代码点击son盒子弹出顺序为：son -> father -> document。

Moony (考研版)

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
DOM事件流

什么是DOM事件流事件流描述的是从页面中接收事件的顺序。事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。DOM事件流分为3个阶段：1. 捕获阶段2. 当前目标阶段3. 冒泡阶段JS代码中只能执行捕获或者冒泡其中一个阶段onclick 和 attachEvent 只能得到冒泡阶段如果 addEventListener 第三个参数是true处于捕获阶段，false或省略处于冒泡阶段
复制链接

扫一扫