事件委托的核心是理解“为什么用、怎么用、容易错在哪”。其原理基于事件冒泡与target判断，用于解决动态元素绑定难和大量子元素性能差两大痛点，需注意父级稳定性、e.target识别及过滤严谨性。

事件委托的核心不在“画图”，而在理解“为什么用、怎么用、容易错在哪”。思维导图只是帮你看清逻辑的工具，不是目的。下面直接按实用结构梳理，你可以照着画成树状图——根节点是“事件委托”，往下分四条主干。

为什么需要事件委托

解决两个真实痛点：

wechat-article-extraction-mp-weixin-qq-com news-webpage-cleaning blog-post-parsing metadata-extraction-title-author-date multiple-output-formats-markdown-json-plain-text batch-processing-support

基于三引擎设计，从微信文章、新闻和博客网页提取干净内容，支持标题作者日期元数据，多格式和批量处理。

下载

• 动态添加的元素（比如点击按钮后追加的列表项）无法提前绑定事件
• 大量子元素（如100个表格行）逐个绑事件，性能差、内存占用高

底层原理就一条：事件冒泡 + target 判断

点击子元素时，事件会沿 DOM 树向上冒泡到父级。只要给父容器绑定一次监听，再通过 e.target 精准识别真正被点的是谁，就能统一处理。

关键代码模式：

list.addEventListener('click', e => {
  if (e.target.tagName === 'LI') {
    console.log('点了这个li:', e.target.textContent);
  }
});

必须注意的三个细节

• 绑定对象必须是稳定存在的父级——不能选会销毁或替换的临时容器
• e.target 是原始触发元素，不是绑定事件的那个父元素（别误用 this）
• 过滤条件要严谨：用 tagName、className、dataset 或 matches()，避免误判嵌套子元素（比如 li 里有 span，点 span 时 target 是 span，不是 li）

典型适用场景与反例

• ✅ 适合：菜单列表、评论区、表格行、标签页、动态表单字段
• ❌ 不适合：需要精确捕获 mousemove/mouseover 的场景（委托后坐标和目标易失真）；或必须阻止冒泡且不允许向上透传的深层嵌套交互