JavaScript事件委托

事件委托原理：不是给每一个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每一个子节点

案例：点击当前li，背景颜色变为pink色

<ul>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
    </ul>
    <script>
        //事件委托的核心原理： 给父节点添加监听器 利用事件冒泡影响每一个子节点
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function (e) {
            //alert('知否知否，点我应有弹框在手！');
            // e.target 指向我们点击的那个对象 谁触发了这个事件 我们点击的是 li e.target 指向的就是li
            e.target.style.backgroundColor = 'pink';
        })
    </script>

案例分析：

给ul注册点击事件，然后利用事件对象的target来找到当前点击的li，因为点击li，事件会冒泡到ul上，ul有注册事件，就会触发事件监听器

事件监听器的作用：我们只操作了一次DOM，提高了程序的性能