JS DOM 事件流及事件委托
// 假设我们有一个列表，我们想要为每个列表项添加点击事件
var list = document.getElementById('myList');
// 传统的方式为每个列表项添加事件监听
var items = list.getElementsByTagName('li');
for (var i = 0; i < items.length; i++) {
items[i].addEventListener('click', function(e) {
console.log('你点击了：' + e.target.innerHTML);
});
}
// 使用事件委托的方式，减少事件监听的数量
list.addEventListener('click', function(e) {
if (e.target && e.target.nodeName === 'LI') {
console.log('你点击了：' + e.target.innerHTML);
}
});这个例子展示了传统的为每个列表项分别添加事件监听的方法，以及使用事件委托的方式来减少事件监听器的数量。事件委托是一种提高事件处理性能的有效手段，它通过在父元素上监听事件，然后根据事件的目标对象来决定如何处理事件。
评论已关闭