说一下事件委托

1. 什么是事件委托

事件委托是指 将父元素的事件处理程序绑定在父元素上，而不是直接绑定在子元素上，通过 事件冒泡机制来管理子元素事件。

核心原理：事件冒泡（Event Bubbling）

• 当子元素触发事件时，事件会向上冒泡到父元素

• 父元素可以通过事件对象 event.target 判断事件来源

2. 传统绑定 vs 事件委托

传统绑定

const items = document.querySelectorAll('li');
items.forEach(item => {
  item.addEventListener('click', () => {
    console.log('点击了', item.textContent);
  });
});

问题：

1. 子元素多时绑定大量事件，性能消耗大

2. 动态生成的子元素，需要再次绑定事件

事件委托

const ul = document.querySelector('ul');

ul.addEventListener('click', (event) => {
  if (event.target.tagName === 'LI') {
    console.log('点击了', event.target.textContent);
  }
});

优势：

1. 少量绑定：只绑定父元素

2. 支持动态元素：子元素动态增加也能响应事件

3. 性能好：避免大量事件绑定

3. 事件委托使用条件

1. 事件需要冒泡

   • click、keydown 等可以冒泡

   • 注意：focus、blur 默认不冒泡，需要用 focusin/focusout

2. 父元素能覆盖所有目标子元素

   • 父元素必须存在于 DOM 中且包含子元素

3. 需要区分事件源

   • 使用 event.target 判断触发事件的具体子元素

   • 如果子元素有多级嵌套，可用 event.target.closest(‘selector’)

4. 常见注意点

1. 冒泡到 document 或 body

   • 父元素绑定过大，事件会冒泡很远，可能影响性能或产生副作用

2. 阻止默认行为

   • 可以在委托事件里调用 event.preventDefault()

3. 动态元素支持

   • 无需再次绑定事件，自动生效

总结

核心理解：

• 事件委托 = 利用冒泡 + 父元素统一处理子元素事件

• 性能优化 + 动态元素处理 + 代码简洁