事件代理详解

一、基本概念

事件代理（Event Delegation），也称为事件委托，是一种在 JavaScript 中处理事件的技术。它基于 DOM（文档对象模型）事件流的原理，利用事件冒泡机制，将一个元素（通常是父元素）的事件处理程序应用于它的多个子元素。

二、工作原理

在 DOM 中，事件传播分为三个阶段：捕获阶段、目标阶段和冒泡阶段。事件代理主要利用冒泡阶段。

当一个子元素（如`<li>`）上的事件（如点击事件）被触发时，该事件首先在目标元素（`<li>`）本身触发（目标阶段），然后事件会向上冒泡，依次经过其父元素、祖父元素等，直到到达文档根节点（`document`）。

三、实现方式

<div id="parent"><button id="child1">Button 1</button><button id="child2">Button 2</button><button id="child3">Button 3</button></div>

document.getElementById("parent").addEventListener("click", function (event) {if (event.target.tagName === "BUTTON") {console.log("A button was clicked.");// 可以通过event.target获取被点击的按钮元素console.log("The clicked button ID is: " + event.target.id);}});

四、优点

减少事件处理程序数量、动态元素处理方便

五、缺点和注意事项

事件对象检查复杂、冒泡可能导致意外触发