JavaScript基础教程（二十三）事件：穿透JavaScript事件迷雾，从冒泡捕获到事件委托-优快云博客

事件流：三阶段传播模型

JavaScript事件在DOM中遵循严格传播路径：

捕获阶段：从window对象向下传递至目标元素
目标阶段：到达实际触发事件的元素
冒泡阶段：从目标元素向上冒泡至window对象

// 事件监听器参数说明
element.addEventListener(eventType, callback, useCapture)

当useCapture为true时，在捕获阶段处理事件；为false（默认值）时，在冒泡阶段处理事件。

实战示例：事件流演示

<div id="outer">
  外层
  <div id="inner">内层（点击我观察事件流）</div>
</div>
<script>
  const outer = document.getElementById('outer');
  const inner = document.getElementById('inner');

  // 捕获阶段事件
  outer.addEventListener('click', () => {
    console.log('外层（捕获阶段）');
  }, true);

  // 冒泡阶段事件
  outer.addEventListener('click', () => {
    console.log('外层（冒泡阶段）');
  }, false);

  inner.addEventListener('click', (event) => {
    console.log('内层（目标阶段）');
    // event.stopPropagation(); // 阻止事件继续传播
  });
</script>

事件对象详解

事件处理函数接收的event对象包含丰富信息：

element.addEventListener('click', (event) => {
  console.log('事件类型：', event.type);
  console.log('目标元素：', event.target);
  console.log('当前处理元素：', event.currentTarget);
  console.log('事件阶段：', event.eventPhase); // 1:捕获 2:目标 3:冒泡
});

事件委托：高效事件处理技巧

事件委托利用冒泡机制，在父元素上统一处理子元素事件：

<ul id="item-list">
  <li data-id="1">项目一</li>
  <li data-id="2">项目二</li>
  <li data-id="3">项目三</li>
</ul>
<script>
  document.getElementById('item-list').addEventListener('click', (event) => {
    if (event.target.tagName === 'LI') {
      console.log('点击的项目ID：', event.target.dataset.id);
      // 动态添加的li元素也会自动拥有此事件处理能力
    }
  });
</script>

高级事件控制

// 一次性事件
element.addEventListener('click', function handler(event) {
  console.log('此事件只会触发一次');
  event.currentTarget.removeEventListener('click', handler);
});

// 阻止默认行为
form.addEventListener('submit', (event) => {
  if (!valid) {
    event.preventDefault(); // 阻止表单提交
  }
});

掌握JavaScript事件机制是前端开发的核心技能。理解事件流模型使您能够编写更高效、可维护的事件处理代码，而事件委托技术则大幅提升动态内容的性能表现。