当前位置：首页 > news >正文

【JavaScript】十六、事件捕获和事件冒泡

news 来源：原创 2025/5/10 7:25:37

文章目录

1、事件流
2、事件捕获
3、事件捕获
4、阻止冒泡
5、解绑事件
6、鼠标经过事件的区别
7、两种事件注册语法的区别

1、事件流

先举个形象的例子：你去西安大雁塔旅游

出发找目的地时：先从你家出发，到陕西省西安市，再到雁塔区，最后到达大雁塔（捕获阶段）
回家时：大雁塔出发，出雁塔区，再出陕西省西安市，再到你家（冒泡阶段）

对比给div绑定一个点击事件，当事件被触发时：会经历两个阶段，分别是捕获阶段、冒泡阶段，事件流则指的是事件完整执行过程中的这个流动路径

在这里插入图片描述

如上，捕获即先从Document对象出发，到html再到body标签，最后找到div标签

捕获阶段是从父到子
冒泡阶段是从子到父

2、事件捕获

事件捕获即从DOM的根元素开始去执行对应的事件 (从外到里)，语法：

在这里插入图片描述

addEventListener第三个参数传入 true 代表是捕获阶段触发(很少使用)
若传入false代表冒泡阶段触发，默认就是false
若是用 L0 事件监听，则只有冒泡阶段，没有捕获

// L0语法回顾，已过时
<button id="myButton">Click Me</button>
<script>
  const button = document.getElementById('myButton');
  button.onclick = function() {
    alert('Button clicked!');
  };
</script>

事件捕获效果演示：用一个div嵌套一个div，加上document对象，形成爷爷、父亲、儿子链路

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            /* w500+h500+bgc快速生成 */
            width: 500px;
            height: 500px;
            background-color: greenyellow;
        }

        .son {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>

<body>
    <!-- .father>.son快速生成 -->
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        document.addEventListener('click', function () {
            alert('这是爷爷元素document触发的')
        }, true)
        const father = document.querySelector('.father')
        const son = document.querySelector('.son')
        father.addEventListener('click', function () {
            alert('这是父亲元素father触发的')
        }, true)
        son.addEventListener('click', function () {
            alert('这是儿子元素son触发的')
        }, true)

    </script>
</body>

</html>

在这里插入图片描述

此时，点击红色的儿子元素部分，因为红色部分也属于绿色的父亲div，更属于整个document，所以三个点击事件都触发，但因为现在addEventListener是true，所以，是事件捕获，从document到父div再到子div，因此，效果是：弹窗依次从父元素到子元素

在这里插入图片描述

3、事件捕获

此时，改成第三个参数不传，即冒泡阶段

在这里插入图片描述

那弹窗的触发顺序就是子到父：

// 结果依次为：
这是儿子元素son触发的
这是父亲元素father触发的
这是爷爷元素document触发的

事件冒泡🫧：当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发

当一个元素触发事件后， 会依次向上调用所有父级元素的同名事件，比如例子里的都是click事件，如果是父级元素，但是keyup事件，那依然不会冒泡🫧
事件冒泡是默认存在的
L2事件监听第三个参数是 false，或者默认都是冒泡

4、阻止冒泡

默认就有冒泡阶段，所以容易导致影响到父级元素的同名事件，此时，就需要阻止冒泡阶段，让这个事件仅对当前元素对象生效：

阻止事件冒泡需要拿到事件对象
语法：

在这里插入图片描述

注意⚠️，这个方法是阻止流动，即同时阻止了捕获阶段和冒泡阶段，但捕获阶段一般开发不用，因此，这个方法常常用来做阻止冒泡，同样用上面的例子，代码改为：

在这里插入图片描述

此时，只会有一个弹窗，其父级元素的同名事件将被阻止：

在这里插入图片描述

5、解绑事件

事件绑定后，还可以解绑：

传统L0语法下，也就是on事件的语法，直接使用null覆盖实现事件解绑

在这里插入图片描述

addEventListener的语法，解绑事件通过：removeEventListener(事件类型, 事件处理函数, [获取捕获或者冒泡阶段])，因此，如下，匿名函数无法被解绑

在这里插入图片描述

举例：一次性点击

<body>
    <button>一次性点击</button>
    <script>
        const btn = document.querySelector('button')
        btn.onclick = function() {
            alert('点击了')
            // 点击一次后就解除绑定，实现一次性点击, L0语法
            btn.onclick = null
        }
    </script>
</body>

当前语法：

<body>
    <button>一次性点击</button>
    <script>
        const btn = document.querySelector('button')
        function fn() {
            alert('点击了')
            btn.removeEventListener('click', fn)
        }
        btn.addEventListener('click', fn)
    </script>
</body>

6、鼠标经过事件的区别

mouseover 和 mouseout 会有冒泡效果
mouseenter 和 mouseleave 没有冒泡效果 (推荐)

看下mouseover 和 mouseout的事件冒泡效果：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            /* w500+h500+bgc快速生成 */
            width: 500px;
            height: 500px;
            background-color: greenyellow;
        }

        .son {
            width: 200px;
            height: 200px;
            background-color: purple;
        }
    </style>
</head>

<body>
    <!-- .father>.son快速生成 -->
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        const father = document.querySelector('.father')
        // 只给father绑定事件
        father.addEventListener('mouseover', function () {
            console.log('鼠标经过')
        })
        father.addEventListener('mouseout', function (e) {
            console.log('鼠标离开')
        })

    </script>
</body>

</html>