阅读量:0
在 JavaScript 中，事件委托是一种降低事件处理器数量的技术，从而提高性能。事件委托是将事件监听器添加到父元素上，而不是为每个子元素单独添加事件监听器。当触发子元素事件时，事件会冒泡至父元素，然后在父元素的事件监听器中处理。
以下是如何使用事件委托优化代码的一些建议：
选择合适的父元素：确保将事件监听器添加到能够包含所有子元素的父元素上。这样可以避免不必要的冒泡和事件处理。
使用
addEventListener方法：使用addEventListener方法可以添加事件监听器，并支持事件捕获和冒泡阶段。检测事件目标：在事件处理函数中，通过
event.target获取触发事件的子元素。这样可以根据需要针对特定元素执行操作。避免在循环中添加事件监听器：如果在循环中为子元素添加事件监听器，可能会导致性能问题。确保在循环外部添加事件监听器。
清理不再需要的监听器：如果动态添加了事件监听器，确保在不再需要时将其移除，以避免内存泄漏。
下面是一个简单的示例，说明如何使用事件委托为多个按钮添加点击事件：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Event Delegation Example</title> </head> <body> <div id="buttons-container"> <button>Button 1</button> <button>Button 2</button> <button>Button 3</button> </div> <script> const buttonsContainer = document.getElementById('buttons-container'); buttonsContainer.addEventListener('click', (event) => { // 获取触发事件的子元素 const targetButton = event.target; // 检查是否为按钮元素 if (targetButton.tagName === 'BUTTON') { console.log(`Button clicked: ${targetButton.textContent}`); } }); </script> </body> </html> 在这个示例中，我们将事件监听器添加到包含三个按钮的父元素（buttons-container）。当点击其中一个按钮时，事件会冒泡至父元素，然后在父元素的事件处理函数中处理。这样，我们只需为父元素添加一个事件监听器，而不是为每个按钮单独添加事件监听器。
