微信登录

事件对象 - 事件对象方法 - 阻止事件传播

前端 - Javascript 《事件对象 - 事件对象方法 - 阻止事件传播》

在前端开发中，JavaScript 的事件机制是构建交互性网页的核心要素之一。当一个事件在页面上触发时，它并不是孤立存在的，而是会在 DOM 树中进行传播。这种传播机制有时会带来一些意想不到的结果，而阻止事件传播的方法就显得尤为重要。本文将详细介绍事件传播的概念、如何使用事件对象的方法来阻止事件传播，并结合实用的例子进行说明。

事件传播的概念

事件传播主要分为三个阶段：捕获阶段、目标阶段和冒泡阶段。

捕获阶段

事件从文档的根节点开始，逐层向下查找目标元素，就像从高空向下捕获目标一样。在这个阶段，事件会依次经过目标元素的各个祖先元素。

目标阶段

事件到达目标元素本身，也就是实际触发事件的元素。

冒泡阶段

事件从目标元素开始，逐层向上冒泡，经过目标元素的各个祖先元素，最终到达文档的根节点。

示例代码说明事件传播

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6. </head>
  8. <body>
  9.     <div id="outer">
  10.         <div id="inner">点击我</div>
  11.     </div>
  12.     <script>
  13.         const outer = document.getElementById('outer');
  14.         const inner = document.getElementById('inner');
  16.         outer.addEventListener('click', () => {
  17.             console.log('外层元素被点击 - 冒泡阶段');
  18.         });
  20.         inner.addEventListener('click', () => {
  21.             console.log('内层元素被点击 - 冒泡阶段');
  22.         });
  24.         outer.addEventListener('click', () => {
  25.             console.log('外层元素被点击 - 捕获阶段');
  26.         }, true);
  28.         inner.addEventListener('click', () => {
  29.             console.log('内层元素被点击 - 捕获阶段');
  30.         }, true);
  31.     </script>
  32. </body>
  34. </html>

当点击内层元素时，控制台会依次输出：

  1. 外层元素被点击 - 捕获阶段
  2. 内层元素被点击 - 捕获阶段
  3. 内层元素被点击 - 冒泡阶段
  4. 外层元素被点击 - 冒泡阶段

阻止事件传播的方法

stopPropagation() 方法

stopPropagation() 方法用于阻止事件在捕获阶段或冒泡阶段的进一步传播。一旦调用了该方法，事件将不会再继续向上或向下传播。

示例代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6. </head>
  8. <body>
  9.     <div id="outer">
  10.         <div id="inner">点击我</div>
  11.     </div>
  12.     <script>
  13.         const outer = document.getElementById('outer');
  14.         const inner = document.getElementById('inner');
  16.         outer.addEventListener('click', () => {
  17.             console.log('外层元素被点击');
  18.         });
  20.         inner.addEventListener('click', (event) => {
  21.             event.stopPropagation();
  22.             console.log('内层元素被点击');
  23.         });
  24.     </script>
  25. </body>
  27. </html>

当点击内层元素时，由于调用了 stopPropagation() 方法，事件不会再冒泡到外层元素，控制台只会输出：

  1. 内层元素被点击

stopImmediatePropagation() 方法

stopImmediatePropagation() 方法不仅会阻止事件的进一步传播，还会阻止当前元素上其他相同类型事件的后续监听器的执行。

示例代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6. </head>
  8. <body>
  9.     <button id="myButton">点击我</button>
  10.     <script>
  11.         const button = document.getElementById('myButton');
  13.         button.addEventListener('click', (event) => {
  14.             event.stopImmediatePropagation();
  15.             console.log('第一个点击事件监听器');
  16.         });
  18.         button.addEventListener('click', () => {
  19.             console.log('第二个点击事件监听器');
  20.         });
  21.     </script>
  22. </body>
  24. </html>

当点击按钮时，由于第一个监听器中调用了 stopImmediatePropagation() 方法，第二个监听器将不会执行，控制台只会输出：

  1. 第一个点击事件监听器

总结

方法 作用 示例场景
stopPropagation() 阻止事件在捕获阶段或冒泡阶段的进一步传播 当你只想触发目标元素的事件，不想让事件影响到其祖先元素时使用
stopImmediatePropagation() 阻止事件的进一步传播，并阻止当前元素上其他相同类型事件的后续监听器的执行 当你需要确保某个事件监听器执行后，其他相同类型的监听器不再执行时使用

在实际开发中，合理使用这两个方法可以帮助我们更好地控制事件的传播，避免不必要的事件触发，提高代码的可维护性和性能。