事件委托通过将n个监听器压缩为1个，大幅减少内存开销、避免重复dom绑定与遍历、复用函数实例、降低管理成本。
事件委托能大幅减少内存开销、提升性能，核心在于它把“N个监听器”压缩成“1个监听器”，从源头上避免了大量重复的对象创建和DOM绑定操作。
监听器数量从 N 降到 1
每个 addEventListener 调用都会生成一个独立的事件监听对象，包含函数引用、捕获/冒泡标志、选项配置等。浏览器需为其分配内存并维护监听关系。
- 100 个按钮逐个绑定 → 创建 100 个监听器对象，占用约 100×（函数+元数据）内存
- 委托到父
<ul></ul>→ 只创建 1 个监听器，内存开销下降 90% 以上 - 实际项目中，列表项超 500 时，传统方式可能多占数 MB 内存，委托后几乎不变
避免反复遍历和绑定 DOM
初始化渲染或动态插入元素时，传统方式必须主动查找目标节点再绑定；委托则跳过这一步。
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
下载
基于三引擎设计，从微信文章、新闻和博客网页提取干净内容，支持标题作者日期元数据，多格式和批量处理。
- 页面加载时：不用
querySelectorAll('li')+ 循环调用addEventListener - AJAX 加载新列表项后：无需再次查询、遍历、绑定，新
<li>自动响应 - 减少 DOM 访问次数，也降低了重排重绘触发风险
函数实例复用，不重复创建闭包
每次为子元素写内联回调或匿名函数，都会生成新的函数实例；委托中监听函数只声明一次，被所有冒泡事件共用。
- 传统方式：
li.addEventListener('click', () => { ... })每次都新建函数对象 - 委托方式：
parent.addEventListener('click', handler)，handler是单一引用 - 尤其在循环中使用
let i或闭包变量时，委托还能规避常见作用域陷阱
管理成本显著降低
移除事件或切换状态时，传统方式要追踪每个子元素的引用；委托只需操作父级一个监听器。
- 销毁组件时：调用一次
removeEventListener即可清理全部子项响应逻辑 - 无需维护子元素 ID、类名或 data 属性映射表
- 配合
e.target.matches('.btn-delete')等判断，逻辑集中、易测试、好扩展
