JS中事件处理机制（秒懂事件委托、事件捕获和事件冒泡）

目录

一、概念

事件委托（Event Delegation）：

事件捕获（Event Capturing）：

事件冒泡（Event Bubbling）：

 二、好处

事件委托的好处：

事件捕获的好处：

事件冒泡的好处：

三、工作原理

事件委托（Event Delegation）：

事件捕获（Event Capturing）：

事件冒泡（Event Bubbling）：

四、代码实例

1.简单代码实例（事件监听）

2.复杂代码实例（简单的待办事项列表）

 五、应用场景

---

一、概念

  当用户在网页上进行交互时，例如点击按钮、输入文本或者滚动页面，这些操作都会触发事件。在 JavaScript 中，我们可以通过事件处理程序来捕获和处理这些事件。事件委托、事件捕获和事件冒泡是与事件处理相关的重要概念。

1. 事件委托（Event Delegation）：

   • 事件委托是一种利用事件冒泡机制的技术，它允许我们将事件处理程序绑定到父元素上，而不是在每个子元素上都绑定事件处理程序。
   • 当一个事件发生在子元素上时，它会冒泡到父元素，然后由父元素上的事件处理程序来处理。这样做的好处是减少了事件处理程序的数量，尤其适用于动态生成的内容。
   • 举例来说，如果有一个列表，我们希望对列表中的每个项都执行相同的操作，那么我们可以将点击事件处理程序绑定到整个列表的父元素上，而不是在每个列表项上都绑定。