JavaScript 事件委托详解与面试指南

一、事件委托核心概念

1. 基本定义

事件委托（Event Delegation）是一种利用事件冒泡机制，将子元素的事件处理委托给父元素统一管理的技术。

2. 实现原理

事件冒泡：事件从触发元素向上传播到DOM树
事件捕获：事件从window向下传递到目标元素（可选阶段）
目标阶段：事件到达实际触发元素

3. 三阶段图示

rust 复制代码

捕获阶段: window -> document -> ... -> 父元素
目标阶段: 目标元素
冒泡阶段: 目标元素 -> ... -> document -> window

二、面试常见问题

基础问题

什么是事件委托？它的原理是什么？
- 参考答案：事件委托是利用事件冒泡机制，在父元素上统一处理子元素事件的技术。原理是通过event.target识别实际触发事件的元素。
为什么要使用事件委托？
- 参考答案：
  - 减少内存消耗（避免为每个子元素绑定事件）
  - 动态添加的元素自动拥有事件处理
  - 提高初始化性能（减少事件绑定次数）

如何实现基本的事件委托？

javascript 复制代码

document.getElementById('parent').addEventListener('click', function(event) {
  if (event.target.classList.contains('child')) {
    // 处理逻辑
  }
});

进阶问题

event.target 和 event.currentTarget 有什么区别？
- event.target：实际触发事件的元素
- event.currentTarget：当前正在处理事件的元素（委托的父元素）

如何处理动态生成的元素事件？

javascript 复制代码

// 使用closest方法处理动态内容
document.addEventListener('click', function(event) {
  const btn = event.target.closest('.dynamic-btn');
  if (btn) {
    // 处理逻辑
  }
});

哪些事件不支持冒泡？如何委托这些事件？
- 不冒泡事件：focus、blur、load、unload等
- 解决方案：
  - 使用支持冒泡的替代事件（focusin/focusout）
  - 手动在元素上绑定事件

深度问题

事件委托对性能有什么影响？如何优化？
- 优点：减少事件监听器数量，降低内存占用
- 缺点：深层嵌套时事件传播路径长
- 优化：
  - 在最近的公共父元素上委托
  - 使用事件委托+节流处理高频事件
如何阻止事件委托？
- event.stopPropagation()：停止事件传播
- event.stopImmediatePropagation()：停止传播并阻止同元素其他处理程序

编写一个通用的事件委托函数

vbnet 复制代码

function delegate(parent, eventType, selector, handler) {
  parent.addEventListener(eventType, function(event) {
    if (event.target.matches(selector)) {
      handler.call(event.target, event);
    }
  });
}

三、实战编码题

题目1：实现表格行点击高亮

javascript 复制代码

// 方案
document.querySelector('table').addEventListener('click', function(event) {
  const row = event.target.closest('tr');
  if (row) {
    // 移除其他行高亮
    document.querySelectorAll('tr.active').forEach(r => {
      r.classList.remove('active');
    });
    // 添加当前行高亮
    row.classList.add('active');
  }
});

题目2：动态列表删除功能

csharp 复制代码

document.getElementById('list').addEventListener('click', function(event) {
  if (event.target.classList.contains('delete-btn')) {
    const item = event.target.closest('li');
    item.remove();
  }
});

四、面试加分点

对比直接绑定和委托的性能
- 直接绑定：O(n)内存占用，初始化耗时长
- 委托：O(1)内存占用，初始化快
事件委托的局限性
- 不适合所有事件类型（如不冒泡的事件）
- 深层嵌套时可能影响性能
- 需要额外代码判断目标元素
现代替代方案
- 使用框架内置功能（如React的合成事件）
- 第三方事件委托库
内存泄漏防范
- 及时移除不需要的委托监听器
- 使用WeakMap存储处理函数

五、常见误区

在document上绑定所有委托
- 问题：事件传播路径过长
- 解决：在最近的公共父元素上绑定
过度使用event.stopPropagation()
- 问题：破坏事件流，影响其他监听器
- 解决：仅在必要时使用
忽略事件委托对动态内容的优势
- 典型反模式：在动态添加元素后重新绑定事件