DOM-事件委托

事件委托

什么是事件委托呢？

举个简单的例子，你家里面有很多的孩子，照顾每个孩子显得比较麻烦和吃力，这时候我们可以把这些孩子托付给学校老师，让老师负责。这就是事件委托。

为什么要事件委托？

事件委托可以减少操作的重复性和繁琐的操作，比如下面这个例子。

例子
要求：当点击某一个li的时候，其背景颜色改变。

HTML部分

    <ul>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
        <li>知否知否，点我应有弹框在手！</li>
    </ul>

按照常规做法，我们可以进行for循环，对每一个li进行事件监听，如果监听到li被点击，改变其颜色。这当然可以，但是我们也可以对父节点监听，再利用冒泡影响子节点.

JS代码如下

    <script>
        // 事件委托的核心原理：给父节点添加侦听器， 利用事件冒泡影响每一个子节点
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function(e) {
            // e.target 这个可以得到我们点击的对象
            e.target.style.backgroundColor = 'pink';
        })
    </script>

这个相对于for循环是不是简单了很多呢。