JS DOM 事件的事件模型和事件委托轻松玩转浏览器交互

2023-09-22 19:37:21

众所周知，DOM 是文档对象模型（Document Object Model）的缩写，它代表着 HTML 和 XML 文档的结构化表示。而 DOM 事件则是用户与网页交互时产生的事件，如点击、移动鼠标、键盘输入等。这些事件会触发特定的事件处理程序，从而执行相应的动作。

DOM 事件模型

DOM 事件模型主要分为三个阶段：事件捕获阶段、事件目标阶段和事件冒泡阶段。

1. 事件捕获阶段

当事件发生时，首先会进入事件捕获阶段。在这个阶段，事件从文档的根节点开始，逐层向下传播，直到到达目标元素。在此过程中，每个元素都会依次触发事件处理程序，执行相应的动作。

2. 事件目标阶段

当事件到达目标元素时，就会进入事件目标阶段。在这个阶段，事件处理程序直接在目标元素上执行，执行完后事件便会结束。

3. 事件冒泡阶段

如果目标元素的事件处理程序没有阻止事件的传播，那么事件就会进入事件冒泡阶段。在这个阶段，事件会从目标元素开始，逐层向上传播，直到到达文档的根节点。在此过程中，每个元素都会依次触发事件处理程序，执行相应的动作。

DOM 事件委托

DOM 事件委托是一种将事件处理程序附加到父元素上，而不是直接附加到子元素上的技术。这样，当子元素发生事件时，事件处理程序也会被触发，从而执行相应的动作。

1. 事件委托的好处

DOM 事件委托的好处主要有以下几点：

提高性能：通过将事件处理程序附加到父元素上，可以减少 DOM 元素的事件监听器数量，从而提高网页的性能。
简化代码：通过使用事件委托，可以减少代码量，使代码更加简洁和易于维护。
增强灵活性：通过使用事件委托，可以更轻松地处理动态添加或删除的元素上的事件。

2. 事件委托的实现

DOM 事件委托的实现非常简单，只需将事件处理程序附加到父元素上，然后在事件处理程序中判断事件的具体目标元素即可。

document.querySelector('ul').addEventListener('click', (event) => {
  const targetElement = event.target;
  // 根据 targetElement 的属性或内容来判断事件的具体目标元素
  if (targetElement.classList.contains('item')) {
    // 执行针对 item 元素的事件处理程序
  }
});