面试题：JavaScript事件对象方法与事件委托的结合运用

实现思路

利用事件委托机制，将点击事件绑定在父元素上，而不是为每个子元素单独绑定。
当点击事件触发时，通过事件对象的 target 属性来判断实际被点击的是哪个子元素。
根据不同的子元素，执行相应的操作。

关键代码

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>事件委托示例</title>
</head>

<body>
  <ul id="parent">
    <li data-action="action1">操作1</li>
    <li data-action="action2">操作2</li>
    <li data-action="action3">操作3</li>
  </ul>
  <script>
    const parent = document.getElementById('parent');
    parent.addEventListener('click', function (event) {
      if (event.target.tagName === 'LI') {
        const action = event.target.dataset.action;
        switch (action) {
          case 'action1':
            console.log('执行操作1');
            break;
          case 'action2':
            console.log('执行操作2');
            break;
          case 'action3':
            console.log('执行操作3');
            break;
          default:
            break;
        }
      }
    });
  </script>
</body>

</html>

使用事件委托的优势

性能优化：为每个子元素单独绑定事件会增加内存开销，尤其是在子元素数量庞大时。而事件委托只需要在父元素上绑定一个事件，大大减少了事件处理程序的数量，从而提升性能。
动态元素支持：当有新的子元素动态添加到列表中时，使用事件委托无需再次为新元素绑定事件，因为父元素的事件处理程序已经可以处理所有子元素的点击事件。而如果为每个子元素单独绑定事件，则需要在添加新元素时手动为其绑定事件。

星途面试题库

面试题：JavaScript事件对象方法与事件委托的结合运用

知识考点

面试题答案

实现思路

关键代码

使用事件委托的优势