事件委托是利用事件冒泡机制，把子元素的事件监听器统一挂到父元素上，通过 event.target 判断实际触发源来处理逻辑。

list.addEventListener('click', (e) => {
  const item = e.target.closest('li');
  if (item && list.contains(item)) {
    console.log('点击了', item.textContent);
  }
});

好处：

  • 减少监听器数量：N 个子元素只需 1 个监听，降低内存占用和绑定开销；
  • 自动支持动态元素：后插入的子元素无需重新绑定；
  • 逻辑集中，便于维护。

易错点：

  • focus、blur、mouseenter 等事件不冒泡（可用 focusin/focusout 或捕获阶段替代）；
  • 子元素上 stopPropagation 会打断委托；
  • 注意用 closest 向上匹配，避免点到 li 内部的子标签时判断失误；
  • 过度委托到 document 层级会让每次事件都走一遍判断，需权衡。

追问方向：事件流三个阶段（捕获、目标、冒泡）以及 addEventListener 第三个参数的作用。