js事件委托

当我们有这样一个列表

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

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

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')
})

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

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
    }
})

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