前言

DOM事件流描述了在DOM树中，事件从最具体的元素（原始目标）开始传播，然后逐级向上传播到最不具体的元素（文档）。

DOM事件流

DOM事件流分为三个阶段：捕获阶段、目标阶段和冒泡阶段。

捕获阶段（Capture Phase）：

• 事件从顶层元素（文档）开始往下传播，逐级到达事件的目标元素。
• 在捕获阶段，事件可以被祖先元素捕获处理，这个阶段的事件处理程序会在目标元素接收事件之前执行。

目标阶段（Target Phase）：

• 事件到达目标元素并在目标元素上触发，即事件的目标是当前接收事件的元素。

冒泡阶段（Bubbling Phase）：

• 事件从目标元素开始往上冒泡，逐级到达顶层元素（文档）。
• 在冒泡阶段，事件可以被祖先元素捕获处理，这个阶段的事件处理程序会在目标元素接收事件后执行。

阻止捕获和阻止冒泡的区别

阻止事件传播可以使用event.stopPropagation()方法（阻止事件冒泡）和event.stopImmediatePropagation()方法（阻止继续冒泡并停止其他事件处理程序的执行）。

事件委托

事件委托是一种优化事件处理的技术，通过将事件处理程序绑定在共同的祖先元素上，利用事件冒泡的特性，在祖先元素上统一处理事件，而不是给每个子元素单独绑定事件处理程序。这样可以减少事件处理程序的数量，提高性能和减少内存占用。

事件委托的优点包括：

• 减少内存占用，因为不需要为每个子元素绑定事件处理程序。
• 动态添加或删除子元素时不需要重新绑定事件处理程序。
• 简化代码结构，集中管理事件处理逻辑。
• 通过了解DOM事件流、阻止事件传播和事件委托等知识，可以更好地优化和管理页面的交互和事件处理。