本文详细介绍了DOM事件模型的三个阶段：事件捕获、目标和冒泡，并探讨了事件委托的概念，如何利用事件冒泡减少事件处理程序，提高性能。通过示例解释了如何在实际代码中应用事件委托，以及它的优势。
DOM（文档对象模型）事件模型是指浏览器中处理事件的机制，它允许开发人员对页面元素的交互行为进行响应。而事件委托是一种利用事件冒泡的特性，将事件处理程序绑定到一个父元素上，从而减少事件处理程序的数量，提高性能。本文将详细介绍DOM事件模型和事件委托，并提供相应的源代码示例。
DOM事件模型
DOM事件模型由三个阶段组成：事件捕获阶段、目标阶段和事件冒泡阶段。
- 事件捕获阶段：事件从文档根节点（
<html>）开始，逐级向下传播到目标元素的父元素。 - 目标阶段：事件达到目标元素，触发与之关联的事件处理程序。
- 事件冒泡阶段：事件从目标元素开始，逐级向上冒泡到文档根节点。
在事件处理程序中，可以使用addEventListener方法绑定事件。例如，下面是一个示例，当按钮被点击时触发事件处理程序：
const button = document.querySelector('button'
订阅专栏 解锁全文
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
