117笔记问答在 JavaScript 中，事件委托是一种降低内存消耗的技术。它通过将事件监听器添加到父元素上，而不是每个子元素上，从而减少了需要维护的事件监听器的数量。当事件触发时，事件会冒泡到父元素，然后在父元素的事件监听器中处理。
以下是如何使用事件委托来减少内存消耗的方法：
-
选择一个合适的父元素：确保有一个父元素可以容纳所有子元素。通常，这是页面的主体部分或某个可滚动的容器。
-
为父元素添加事件监听器：使用
addEventListener方法为选定的父元素添加事件监听器。将事件类型（如 ‘click’）作为第一个参数，第二个参数是一个回调函数。
document.querySelector('#parentElement').addEventListener('click', handleEvent);
- 在回调函数中检查事件目标：在事件监听器的回调函数中，通过
event.target获取触发事件的子元素。然后根据需要对子元素执行操作。
function handleEvent(event) {
const targetElement = event.target;
if (targetElement.matches('.childElement')) {
// 对子元素执行操作
}
}
- 清理事件监听器（可选）：如果你在某个时刻需要移除事件监听器，可以使用
removeEventListener方法。但请注意，为了使removeEventListener正常工作，你需要将事件监听器添加时的相同函数引用传递给它。
function handleEvent(event) {
// ...
}
const parentElement = document.querySelector('#parentElement');
parentElement.addEventListener('click', handleEvent);
// 在需要的时候移除事件监听器
parentElement.removeEventListener('click', handleEvent);
通过使用事件委托，你可以有效地减少内存消耗，因为只需为父元素添加一个事件监听器，而不是为每个子元素添加单独的事件监听器。这将大大降低内存使用，并提高应用程序的性能。