H5 DOM 事件委托与生命周期管理

列表、弹窗和动态组件会注册大量点击、滚动和输入事件。如果每个节点分别绑定且销毁时遗漏解除，页面可能重复响应并长期持有旧组件。理解事件捕获、目标和冒泡，再通过事件委托和统一清理管理生命周期，可以减少监听数量和隐藏引用。

一、理解事件传播

一次 DOM 事件通常经历捕获、到达目标和冒泡三个阶段。处理函数中的两个属性含义不同：

• target 是事件最初发生的节点。
• currentTarget 是当前正在执行监听器的节点。

点击按钮内的图标时，target 可能是图标，不能直接假设它就是按钮。

二、使用 closest 定位动作元素

function handleListClick(event: MouseEvent): void {
  const origin = event.target;
  if (!(origin instanceof Element)) return;

  const actionElement = origin.closest<HTMLElement>('[data-action]');
  if (!actionElement || !listContainer.contains(actionElement)) return;

  const action = actionElement.dataset.action;
  const itemId = actionElement.dataset.itemId;
  if (!itemId) return;

  if (action === 'open') openItem(itemId);
  if (action === 'delete') requestDelete(itemId);
}

listContainer.addEventListener('click', handleListClick);

容器边界检查可以防止 closest 匹配到容器外的祖先元素。

三、事件委托适合动态列表

列表项增删时，容器监听器无需重新注册。它适合冒泡事件和行为相似的大量子节点。

并非所有事件都以相同方式冒泡，输入、焦点和媒体事件要确认具体行为。复杂独立组件也不必为了减少几个监听器强行委托到页面根节点。

四、谨慎停止传播

stopPropagation 会阻止后续传播，可能破坏埋点、弹窗关闭和父级组件行为。只有组件边界确实要求独占事件时才使用。

preventDefault 阻止浏览器默认行为，与停止传播不是一回事。按钮、表单和文本选择等默认行为应根据语义决定是否取消。

五、滚动监听使用被动模式

不需要阻止滚动时，可以声明被动监听：

function onScroll(): void {
  scheduleHeaderUpdate();
}

scrollContainer.addEventListener('scroll', onScroll, {
  passive: true
});

高频回调中的视觉更新还应按帧合并，不能因为使用被动监听就执行大量同步计算。

六、统一解除监听

支持信号的事件监听可以由一个控制器统一取消：

class PanelController {
  private readonly events = new AbortController();

  mount(element: HTMLElement): void {
    element.addEventListener('click', this.handleClick, {
      signal: this.events.signal
    });
    window.addEventListener('resize', this.handleResize, {
      signal: this.events.signal
    });
  }

  dispose(): void {
    this.events.abort();
  }

  private handleClick = (): void => {};
  private handleResize = (): void => {};
}

该能力需要符合项目最低浏览器兼容范围，不支持时沿用现有成对解除方案。

七、避免匿名函数无法解除

注册和解除时需要同一个函数引用。把匿名函数分别写在两处不会解除原监听。

类字段箭头函数可以保留稳定引用和正确实例上下文。若组件会多次挂载，还要防止重复注册。

八、自定义事件表达边界

组件可以发出语义化事件，让父级协调业务。事件载荷只包含必要不可变数据，不直接暴露内部 DOM 节点和可变状态。

关键流程如果需要返回值或严格顺序，显式回调通常比全局事件广播更清晰。不要把所有组件通信都放到文档根节点。

九、处理异步回调

事件触发异步请求后，组件可能在结果返回前销毁。请求应支持取消，回调更新前确认组件仍处于有效状态。

不要只靠一个永久布尔值掩盖生命周期问题。优先让任务和监听都由同一个组件作用域管理。

十、测试事件边界

建议验证：

• 点击子图标仍能识别正确按钮。
• 动态新增列表项无需重新绑定。
• 组件重复挂载不会处理两次。
• 销毁后窗口事件不再调用组件。
• 停止传播不会破坏父级必要行为。
• 键盘触发与鼠标点击结果一致。
• 异步任务完成时旧组件不会被更新。

总结

事件委托利用冒泡让容器管理动态子节点，但需要正确区分目标与当前节点，并限制匹配范围。停止传播和取消默认行为只在明确语义下使用，所有监听与异步任务则跟随组件生命周期统一清理，页面才能避免重复响应和隐性泄漏。