深入理解JS中的事件委托
JavaScript中的事件委托是一种非常有用的事件处理模式，它允许我们利用事件模型的事件冒泡阶段来减少事件处理器的数量，提高网页性能。本文将介绍事件委托的概念、工作原理、优点以及如何在实际项目中应用事件委托。
1、事件模型
事件模型指在Web开发中，处理和管理事件（如用户输入、系统生成的事件等）的机制和流程。在JavaScript中，事件模型非常关键，因为它定义了事件如何创建、传播和被监听器捕获的规则
1.1、事件
在浏览器中，web事件是由 DOM 元素产生的资源，监听事件来实现JS和HTML交互的载体。web事件被定义成了浏览器内置的API。
1.2、事件模型
JavaScript的事件模型包括三个重要的阶段：事件捕获阶段、目标阶段和事件冒泡。这三个阶段也是事件触发的三个阶段：
- 事件捕获阶段：指从最外层的元素开始捕获事件，然后逐级向下传递到最具体的元素。这个过程是从DOM树的根节点开始的，逐级向下直到事件的目标元素。事件捕获的目的是在事件到达目标元素之前就能够捕获到它;
- 目标阶段：事件到达目标元素本身，触发目标元素上的事件处理程序;
- 事件冒泡阶段：事件冒泡正好与事件捕获相反，事件冒泡是指事件从最具体的元素开始发生，然后逐级向上传播到较为不具体的元素（通常是直到文档的根元素）。大多数事件（如点击事件）都会冒泡，这意味着事件不仅仅在其直接绑定的元素上触发，还会在其父元素、祖父元素等上触发。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title