【JavaScript】事件委托

【原理】

事件委托利用浏览器事件触发机制，即事件的捕获与事件的冒泡机制，前一篇文章我们写到浏览器的工作原理，其中事件的触发有两种情况，从window节点开始触发，一直到触发事件的元素上，从上到下，称为事件捕获，从元素触发，一直到最外的window节点，称为事件冒泡，经过W3C的共同标准，触发事件分为两个阶段，即先触发事件捕获，再触发事件冒泡，那我们绑定的事件是否会触发两次呢，在addeventlistener事件中，存在第三个布尔值参数，默认为false，则事件在冒泡阶段执行，设定为true则会在捕获阶段执行。

【实现】

<ul id="test">
    <li></li>
    <li></li>
    <li></li>
</ul>

<script>
    // 定义点击事件触发
    let obj = document.getElementById("test")
    let li = obj.getElementByTagName('li')
    li.forEach(item => {
        item.addEventListener('click', () => {
            // do something
        })
    })
    
    // 事件委托
    obj.addEventListener('click', () => {
        // do something
    })
</script>

利用事件冒泡原理，将触发事件绑定在父元素上，则在子元素内点击都会冒泡到父元素上，触发点击事件，这样只会触发一次DOM事件，减轻性能