事件委托是指将事件监听器添加到父元素上,这样可以通过事件冒泡机制捕获到子元素的事件,从而实现对子元素的事件代理。事件委托可以减轻浏览器的负担,增加代码的可维护性。

// 原始写法
const items = document.querySelectorAll('.item');
items.forEach((item) => {
  item.addEventListener('click', (event) => {
    console.log(event.target.textContent.trim());
  });
});

// 事件委托写法
const list = document.querySelector('.list');
list.addEventListener('click', (event) => {
  if (event.target.classList.contains('item')) {
    console.log(event.target.textContent.trim());
  }
});