JS DOM 事件流及事件委托

作者：System 时间：2024年08月24日分类：所有,javascript 字数：625

这篇文章距离上次修改已过221天，其中的内容可能已经有所变动。

// 假设我们有一个列表，我们想要为每个列表项添加点击事件
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);
    }
});

这个例子展示了传统的为每个列表项分别添加事件监听的方法，以及使用事件委托的方式来减少事件监听器的数量。事件委托是一种提高事件处理性能的有效手段，它通过在父元素上监听事件，然后根据事件的目标对象来决定如何处理事件。

JS DOM 事件流及事件委托

评论已关闭

推荐阅读