前端面试题（四）—— 事件委托（Event Delegation）

一、什么是事件委托

事件委托（Event Delegation）是一种常用的技术。

它利用事件冒泡的特性，在父元素上监听事件，而不是在子元素上直接添加事件监听器。

通过在父元素上捕获事件，然后根据事件的目标（target）来执行相应的操作，从而实现对子元素的事件处理。

二、实现方式

通过给父元素添加事件监听器，然后在事件处理函数中判断事件的目标元素是否是我们所关心的子元素，如果是，则执行相应的操作，如果不是，则忽略。

例子

有一个列表，点击每个列表项的时候，打印列表项的文本内容，代码如下：

html

<ul id="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>

js

// 获取父元素（有序列表）
  const list = document.getElementById('list');

  // 添加事件监听器到父元素上
  list.addEventListener('click', function (event) {
    // 检查事件目标是否是列表项（li元素）
    if (event.target.tagName === 'LI') {
      // 在控制台中显示列表项的文本内容
      console.log(event.target.textContent);
    }
  });

在这个例子中，事件监听器在父元素 <ul> 上，而不是每个 <li> 上，点击 <li> 时，事件会冒泡到父元素。

这样无论有多少 <li>，我们只需要在父元素添加一个事件监听器，就可以处理所有列表项的点击事件，从而减少了重复的代码，提高了代码的可维护性和性能。

三、优势

1、减少内存消耗

通过将事件监听器绑定到父元素上，而不是给每个子元素都添加监听器，可以减少内存消耗，特别是当页面中有大量子元素时。

2、动态元素的处理

对于动态添加的子元素，如果使用事件委托，不需要额外的操作来添加事件监听器，因为事件处理器是绑定在父元素上的，对于新添加的子元素也同样有效。

3、简化代码结构

使用事件委托可以减少重复的代码，特别是当多个子元素需要相同的事件处理逻辑时，只需在父元素上添加一个事件监听器即可。

4、提高性能

减少了事件处理器的数量，可以提高页面的性能，特别是在处理大量元素时。