20K的前端，原来是这样写事件委托的！

## **事件委托的运作原理：让页面更灵敏** 

身为前端开发者的你，是否有遇到过这样的场景：一个页面中存在许多相似的元素，每个元素都需要绑定事件处理程序，但你又不想要为每个元素都单独绑定事件处理程序。
 
这时，事件委托就派上用场了。

事件委托是一种JavaScript技术，它允许您将事件处理程序绑定到父元素，然后让子元素继承该事件处理程序。这样，当子元素触发事件时，父元素的事件处理程序就会被执行。

举个例子，假设你有一个页面，其中包含一个表格。表格中有许多行，每行都包含一个按钮。当用户点击一个按钮时，你希望执行某个操作。

使用事件委托，您可以将事件处理程序绑定到表格元素，然后让每行都继承该事件处理程序。这样，当用户点击一个按钮时，表格的事件处理程序就会被执行。

事件委托的运作原理是基于事件冒泡。当子元素触发事件时，事件会从子元素开始向上传播到父元素。如果父元素绑定了事件处理程序，则该事件处理程序就会被执行。

## **事件委托的应用场景：少写多做，不写代码不报错** 

事件委托经常被用在以下场景中：

* **列表中的项目：**  当您有一个包含许多项目的列表时，您可以将事件处理程序绑定到列表元素，然后让每个项目都继承该事件处理程序。这样，当用户点击一个项目时，列表的事件处理程序就会被执行。
* **表格中的行：**  当您有一个包含许多行的表格时，您可以将事件处理程序绑定到表格元素，然后让每行都继承该事件处理程序。这样，当用户点击一行时，表格的事件处理程序就会被执行。
* **表单中的元素：**  当您有一个包含许多元素的表单时，您可以将事件处理程序绑定到表单元素，然后让每个元素都继承该事件处理程序。这样，当用户与表单中的元素进行交互时，表单的事件处理程序就会被执行。

## **代码质量标准：以约束为先，方能突破** 

* **语义化 HTML：**  使用语义化 HTML 可以使您的代码更易于理解和维护。语义化 HTML 元素包括标题、段落、列表和链接等。
* **可重用组件：**  创建可重用组件可以减少代码重复，并使您的代码更容易维护。可重用组件可以是函数、类或模块。
* **单元测试：**  单元测试可以帮助您发现代码中的错误，并确保您的代码在各种情况下都能正常工作。
* **代码注释：**  代码注释可以帮助其他开发者理解您的代码，并使您的代码更容易维护。代码注释可以是单行注释或多行注释。

## **事件委托的优劣势：具体情况具体分析** 

**优点：** 

* 减少代码重复：事件委托可以帮助您减少代码重复，因为您只需要将事件处理程序绑定到父元素，然后让子元素继承该事件处理程序。
* 提高代码可维护性：事件委托可以提高代码的可维护性，因为您只需要在父元素中修改事件处理程序，而不需要在每个子元素中都修改事件处理程序。
* 提高性能：事件委托可以提高性能，因为当子元素触发事件时，只有父元素的事件处理程序会被执行，而不需要执行每个子元素的事件处理程序。

**缺点：** 

* 难以调试：事件委托可能会导致代码难以调试，因为当子元素触发事件时，事件会从子元素开始向上传播到父元素。这可能会使您难以确定事件是在哪个元素中被触发