【前端】详解JavaScript事件代理（事件委托）
事件委托是一种优化事件处理的技术，通过在父元素上监听事件，而不是在每个子元素上单独设置事件监听器。这样可以减少内存消耗，特别是在处理大量元素时尤其有用。
以下是一个使用事件委托的例子：
HTML:
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>JavaScript:
// 获取ul元素
var ul = document.getElementById('myList');
// 为ul添加事件监听器
ul.addEventListener('click', function(e) {
// 获取触发事件的元素
var target = e.target;
// 检查触发事件的元素是否为li
if (target && target.nodeName === 'LI') {
// 如果是li，执行操作
console.log('List item clicked:', target.textContent);
}
});在这个例子中，我们在ul上设置了一个点击事件监听器，而不是在每个li上设置。当用户点击li时，事件会冒泡到ul，然后事件处理器会检查事件的目标是否为li元素，如果是，则执行相关操作。这样，我们只需要一个事件监听器，就可以管理所有子元素的事件。
评论已关闭