当前位置：首页 > JavaScript

js实现点击冒泡

2026-04-07 09:25:58JavaScript

事件冒泡的概念

事件冒泡是DOM事件传播的一种机制，当某个元素触发事件时，事件会从触发元素开始向上逐级传播到DOM树的根节点（document对象）。这种机制允许父元素监听子元素的事件。

阻止事件冒泡的方法

在JavaScript中，可以通过调用事件对象的stopPropagation()方法来阻止事件继续向上冒泡。

js实现点击冒泡

element.addEventListener('click', function(event) {
  event.stopPropagation();
  // 其他处理逻辑
});

示例代码

以下是一个完整的示例，展示如何实现点击冒泡以及如何阻止冒泡：

js实现点击冒泡

<div id="parent">
  <div id="child">点击我</div>
</div>

<script>
  const parent = document.getElementById('parent');
  const child = document.getElementById('child');

  parent.addEventListener('click', function() {
    console.log('父元素被点击');
  });

  child.addEventListener('click', function(event) {
    console.log('子元素被点击');
    // 阻止事件冒泡
    // event.stopPropagation();
  });
</script>

事件捕获与冒泡

DOM事件流分为三个阶段：捕获阶段、目标阶段和冒泡阶段。默认情况下，事件监听器在冒泡阶段触发。可以通过设置addEventListener的第三个参数为true来在捕获阶段触发。

element.addEventListener('click', function() {
  console.log('捕获阶段触发');
}, true);

实际应用场景

事件冒泡常用于事件委托（Event Delegation），即通过父元素统一管理子元素的事件。这种方式可以减少事件监听器的数量，提升性能。

<ul id="list">
  <li>项目1</li>
  <li>项目2</li>
  <li>项目3</li>
</ul>

<script>
  const list = document.getElementById('list');
  list.addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
      console.log('点击了:', event.target.textContent);
    }
  });
</script>