js 事件冒泡和事件委托

事件冒泡是指当一个元素上的事件被触发时，该事件会从最内层的元素开始向父级元素逐级触发，直到触发到最外层的元素为止。事件冒泡可以通过使用 `event.stopPropagation()` 方法来停止继续向上冒泡。

事件委托则是利用事件冒泡的特性，将事件处理程序绑定在父级元素上，通过判断事件源来执行相应的操作。这种方式可以减少事件处理程序的数量，优化性能，特别适用于动态添加或删除子元素的情况。

举个例子来说，假设有一个父级元素 ul，里面包含多个子元素 li，我们希望点击每个 li 元素时能执行相应的操作。传统的方式是给每个 li 元素都绑定点击事件，但是如果 li 元素很多的话会导致事件处理程序过多。而使用事件委托的方式，我们只需要给 ul 元素绑定一个点击事件，并通过判断事件源是哪个 li 元素来执行对应的操作。

// 传统方式
const lis = document.querySelectorAll('li');
lis.forEach(li => {
  li.addEventListener('click', function() {
    // 执行操作
  });
});

// 事件委托
const ul = document.querySelector('ul');
ul.addEventListener('click', function(event) {
  const target = event.target;
  if (target.tagName === 'LI') {
    // 执行操作
  }
});

通过事件委托，我们只需要绑定一个事件处理程序，即使动态添加或删除了 li 元素，也不需要重新绑定事件处理程序，从而提高了性能和代码的可维护性。