js事件委托

发表于 | 分类于 | 阅读 4次
字数统计: 334 | 阅读时长 ≈ 1

当我们有这样一个列表

1
2
3
4
5
<ul id="list">
    <li id="list_1">列表1</li>
    <li id="list_2">列表2</li>
    <li id="list_3">列表3</li>
</ul>

a
现在给每个列增加点击事件用于业务需求，可能会这样写

1
2
3
4
5
6
7
8
9
document.getElementById('list_1').addEventListener('click', function () {
    console.log('点击了列表1')
})
document.getElementById('list_2').addEventListener('click', function () {
    console.log('点击了列表2')
})
document.getElementById('list_3').addEventListener('click', function () {
    console.log('点击了列表3')
})

b
缺点是随着列表的增多，事件监听会越来越多，会影响性能。
这时事件委托就派上用场了，事件委托主要是利用事件冒泡，通过只监听li的父元素ul，通过事件属性的不同写逻辑判断调用哪个业务方法，减少的监听事件，提升性能。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
document.getElementById('list').addEventListener('click', function (e) {
    console.log(e)
    switch (e.target.id) {
        case 'list_1':
            console.log('点击了列表1')
            break
        case 'list_2':
            console.log('点击了列表2')
            break
        case 'list_3':
            console.log('点击了列表3')
            break
    }
})

这样写虽然减少了监听事件，但是不能阻止列表事件冒泡了。