冒泡和事件委托有什么关系？事件委托有什么用？

冒泡和事件委托是两个不同的概念，但是事件委托可以利用冒泡机制实现。

冒泡是指事件从最具体的元素（文档中嵌套层次最深的那个节点）开始，逐级向上传播到较为抽象的节点（文档）。事件在传播过程中可以被各个父级元素捕获并处理。

事件委托是指将某个元素的事件委托给其父级或祖先元素来处理。比如将多个按钮的点击事件委托给它们的共同父级元素，这样可以减少事件绑定的次数，提高性能，同时还可以避免因为动态添加或删除元素而需要重新绑定事件的问题。

事件委托可以利用冒泡机制来实现，即将事件绑定在父级元素上，当特定子元素触发事件时，该事件会冒泡到父级元素，父级元素便可以对事件进行处理。这样就可以避免给每个子元素都绑定事件的问题，同时也可以避免由于子元素的变化而需要重新绑定事件的问题。

相关问题

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 元素，也不需要重新绑定事件处理程序，从而提高了性能和代码的可维护性。

DOM事件捕获、冒泡和事件委托，不冒泡的事件有哪些

1. DOM事件捕获：事件从最外层的祖先元素开始向下传递，直到目标元素。

2. DOM事件冒泡：事件从目标元素开始向上传递，直到最外层的祖先元素。

3. 事件委托：将事件绑定在父元素上，利用事件冒泡的机制，在父元素上统一处理子元素的事件。

4. 不冒泡的事件有：focus、blur、load、unload、resize、submit、reset、change。