JavaScript 中的事件委托技巧

在 JavaScript 开发中，事件委托是一个优化性能和简化事件绑定的重要技巧。

事件委托的核心思想是利用事件冒泡原理，将事件绑定在父元素上，而不是直接绑定在众多子元素上。例如，有一个包含许多列表项的无序列表 <ul>，当需要为每个 <li> 元素绑定点击事件时，传统的做法是遍历每个 <li> 并添加事件监听器，但这在元素数量多或动态生成元素时效率低下。

采用事件委托，只需为 <ul> 添加一次事件监听器：ul.addEventListener('click', function(event) { if (event.target.tagName === 'LI') { // 处理点击事件 } })。这样，不管 <ul> 下有多少个 <li>，甚至是后续动态添加的 <li>，都能通过检查 event.target 来确定是否是 <li> 被点击，从而触发相应事件处理逻辑。

这个技巧减少了内存占用，因为无需为每个子元素存储事件处理器。在动态更新的页面中，如表格行操作、评论列表互动等场景，事件委托避免了频繁重新绑定事件的麻烦，提升了代码的可维护性和整体性能，使 JavaScript 应用响应更迅速、运行更流畅。