什么是事件委托？

事件委托是基于JavaScript事件冒泡机制的一种高效编程技术。具体表现为将一个或多个子元素的事件监听功能“委托”给父元素统一处理，而不是在每个子元素上单独绑定事件监听器。核心原理是通过DOM事件流中的冒泡阶段（事件从触发元素向上传递到祖先元素）实现对多个子元素的统一管理。

事件委托的运作机制如下：

1. 事件绑定位点：在子元素的父组件上添加事件监听函数。
2. 目标辨别：当某子元素引发事件时，冒泡事件抵达父元素。处理函数通过event.target或（在旧版IE中event.srcElement）精确识别哪个子元素触发事件。
3. 逻辑处理：借助条件语句检查event.target属性（如判断Class名，tagName等），执行特定响应该子元素的操作逻辑。

例如，在如下代码场景中（展示点击列表高亮某一项与弹醒提示）：

<div id="button-container">
    <button class="item">Item 1</button>
    <button class="item">Item 2</button>
    <button class="item">Item 3</button>
</div>
<script>
document.getElementById("button-container").addEventListener("click", e => {
    if(e.target.classList.contains("item")) {
        // 移除所有激活状态
        document.querySelectorAll(".item").forEach(e => e.classList.remove("active"));
        // 仅激活被点击项目
        e.target.classList.add("active");
        alert(`已选择: ${e.target.textContent}`);
    }
});
</script>

其核心优势可系统总结为：

• 提升性能（Optimized Performance）：将众多监听器合并为单一个可减少内存资源开销，特别有助于含大批量元素或大型应用的管理处理。
• 完美处理未来内容（Future-proof Handling）：当动态向DOM添加新元素时，事件立即获得处理能力因经由委托生效流程。这一特点极大强化了组件的动态可扩展性。
• 简化和集中处理代码（Centralized Logic）：父元素中唯一监听点有利于降低代码复杂性和代码行量量，减少逻辑错误机会，增强了工程可维护性。

应该注意：并非所有事件都有用此模式。如“focus”，“blur”，及“load”类事件因不支持或仅捕获而不冒泡结构故不能委托生效；处理这些应当另设专门方法。