事件委托（其实也是使用了冒泡的原理）

一个父盒子里面有多个按钮，现在我们要给父盒子中的每一个按钮绑定一个事件， 如果通过遍历去绑定，太消耗性能了，利用事件委托我们直接给父元素绑定即可完成

优点：

• 提升性能：每一个函数都会占用内存空间。每一个事件都会与dom节点进行交互，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多；如果使用事件委托，只需添加一个事件处理程序代理所有事件,所占用的内存空间更少。

• 动态监听：使用事件委托可以自动绑定动态添加的元素,即新增的节点不需要主动添加也可以一样具有和其他元素一样的事件。

代码示例

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li><div>4</div></li>
    <span>5</span>
    <div>6</div>
</ul>

<script>
    const ul = document.querySelector('ul');
    ul.addEventListener('click', function (event){
        const target = event.target
        // 标签为li标签 而且 父元素为ul
        if(target.tagName === 'LI' && target.parentNode === this){
            alert(`${target.innerText}被点击了`);
        }
    });
</script>

参考文章链接

JS中的事件代理和事件委托 (opens new window)