js中的事件冒泡，事件捕获，默认事件_js判断是否是默认事件参数-优快云博客

本文链接：https://blog.youkuaiyun.com/lwx931449660/article/details/114374101

本文深入解析JavaScript中的事件流概念，包括事件冒泡与事件捕获两种传递方式，并介绍如何运用这些原理实现事件代理，以及如何阻止事件冒泡与捕获。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js中的事件传递方式有两种：冒泡和捕获。

事件冒泡

js中事件会以冒泡的形式由内到外的向上传递。由最内层点击元素向外扩散到最外层元素，激活外层元素注册的相应事件，这就是事件冒泡。

事件冒泡是js语言中事件的传递过程，传递方式，我们会需要用到它来做一下事情，但有时它的存在也会影响我们的操作。

使用：事件代理(事件委托)

什么是事件代理：利用事件冒泡的特性，将本应该注册在子元素上的处理事件注册在父元素上，使用父元素来代理多个子元素的事件。

这样做可以减少DOM操作，减少事件的注册步骤，提升性能。

禁用：阻止事件冒泡

为什么要阻止事件冒泡：在一些场景中，比如当外层元素包裹内层按钮，点击内层按钮事件会以冒泡的形式传递到外层元素上，同时激活外层元素的相应事件，而这并不是我们想要的，我们只是想激活内层按钮的事件，这种场景就需要阻止事件冒泡。

怎么阻止事件冒泡：使用HTML DOM 的 event对象，e.stopPropagation()

什么是event对象：Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

buttonClick(e) { // vue中为$event
    // event对象的获取及兼容写法自己去查找吧
    e.stopPropagation();
    e.cancelBubble = true;// 兼容IE
}

事件捕获

事件捕获与事件冒泡刚好相反，事件会从最外层开始发生，依次触发，直到最具体的元素，这就是事件捕获。

事件捕获其实跟事件冒泡差不多，事件捕获是总最外层开始向内层传递。即最外层元素上的事件先被触发。

阻止事件捕获：e.stopImmediatePropagation();

事件冒泡与事件捕获的区别

对于同样是多层嵌套的HTML结构，点击最内层的按钮，那么，到底是执行事件冒泡还是事件捕获呢，默认是事件冒泡。

事件冒泡跟事件捕获统称为事件流，而一般情况下我们只在冒泡阶段处理事件，而是否在捕获阶段处理事件可以通过 addEventListener 方法来配置，addEventListener有三个参数，第一个是事件类型，第二个是回调处理函数，第三个就是是否在捕获阶段处理，默认 false ，即在冒泡处理，所以一般情况下事件只会向上冒泡。

所以 stopPropagation 方法即可以阻止事件冒泡，也可以阻止事件捕获，而 stopPropagation 方法与 stopImmediatePropagation 方法的区别在于：

如果多个事件监听器被附加到相同元素的相同事件类型上，当此事件触发时，它们会按其被添加的顺序被调用。如果在其中一个事件监听器中执行 stopImmediatePropagation() ，那么剩下的事件监听器都不会被调用。即 stopImmediatePropagation 方法既能阻止事件冒泡也可以阻止当前元素绑定的其他相同类型的事件被触发。

例：

<!DOCTYPE html>
<html>
    <head>
        <style>
            p { height: 30px; width: 150px; background-color: #ccf; }
            div {height: 30px; width: 150px; background-color: #cfc; }
        </style>
    </head>
    <body>
        <div>
            <p>paragraph</p>
        </div>
        <script>
            const p = document.querySelector('p')
            p.addEventListener("click", (event) => {
              alert("我是p元素上被绑定的第一个监听函数");
            }, false);

            p.addEventListener("click", (event) => {
              alert("我是p元素上被绑定的第二个监听函数");
              event.stopImmediatePropagation();
              // 执行stopImmediatePropagation方法,阻止click事件冒泡,并且阻止p元素上绑定的其他click事件的事件监听函数的执行.
            }, false);

            p.addEventListener("click",(event) => {
              alert("我是p元素上被绑定的第三个监听函数");
              // 该监听函数排在上个函数后面，该函数不会被执行
            }, false);

            document.querySelector("div").addEventListener("click", (event) => {
              alert("我是div元素,我是p元素的上层元素");
              // p元素的click事件没有向上冒泡，该函数不会被执行
            }, false);
        </script>
    </body>
</html>