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

在JavaScript中，事件处理机制包含三个阶段：事件捕获、事件目标和事件冒泡。

1. 事件捕获（Capturing）：事件从最外层开始，逐层向内传播，直至目标元素。
2. 事件目标（Target）：事件在目标元素上触发。
3. 事件冒泡（Bubbling）：事件从目标元素开始，向外逐层传播。

事件委托是一种利用事件冒泡，处理多个元素事件的高效方法。事件委托可以将一个事件处理器绑定到一个父元素，而不是为每个子元素单独设置事件处理器。当子元素触发事件时，由于事件冒泡，父元素的事件处理器会被触发，并且可以通过事件的 target 属性来确定是哪个子元素触发了事件。

例子代码：

// 假设有一个父元素ul，它包含多个子列表项li
const ul = document.querySelector('ul');
 
// 事件委托例子
ul.addEventListener('click', function(event) {
  if (event.target && event.target.nodeName === 'LI') {
    // 如果事件目标是li，执行操作
    console.log('List item clicked:', event.target.textContent);
  }
});

在这个例子中，我们为父元素 ul 设置了一个点击事件监听器。当任何子元素 li 被点击时，事件冒泡到 ul，触发这个监听器。监听器函数通过检查 event.target 来判断是否是 li 元素被点击，如果是，则执行相应的操作。这就避免了为每个 li 元素单独设置事件监听器，提高了效率。