面试题：JavaScript 事件委托在动态 DOM 元素中的应用

实现方式：在拥有动态列表项的父元素上绑定点击事件。假设 HTML 结构如下：

<ul id="parentList">
  <!-- 动态添加的列表项将插入这里 -->
</ul>

使用 JavaScript（以 jQuery 为例）实现事件委托绑定点击事件：

$(document).ready(function() {
  $('#parentList').on('click', 'li', function() {
    // 这里写点击列表项后的处理逻辑
    console.log('点击了列表项');
  });
});

在原生 JavaScript 中实现如下：

document.addEventListener('DOMContentLoaded', function() {
  const parentList = document.getElementById('parentList');
  parentList.addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
      // 处理逻辑
      console.log('点击了列表项');
    }
  });
});

原理：事件委托利用了事件冒泡机制。当一个元素上的事件被触发时，该事件会从目标元素开始，逐级向上传播到 DOM 树的根节点。在上述示例中，当点击动态添加的列表项（<li>）时，点击事件会冒泡到其父元素（<ul id="parentList">），此时父元素上绑定的点击事件监听器就会捕获到该事件，通过判断事件源（event.target）是否为目标列表项，来决定是否执行相应的处理逻辑。
优势：
- 性能提升：无需为每个动态添加的列表项单独绑定事件监听器，减少了内存开销。如果有大量动态列表项，为每个项绑定事件会占用大量内存，而事件委托只需在父元素上绑定一个监听器，极大提高了性能。
- 动态适应性：对于新添加的列表项，无需再次手动绑定事件。无论何时通过 AJAX 添加新的列表项，由于事件委托基于父元素的事件捕获，新列表项的点击事件依然能被正确处理，增强了代码的可维护性和灵活性。

面试题：JavaScript 事件委托在动态 DOM 元素中的应用

知识考点

面试题答案