JS事件委托(什么情况下使用事件委托)

1. 什么是事件委托

• 事件委托：把事情委托给别人，代为处理。

• 事件委托也称为事件代理，在 jQuery 里面称为事件委派。

• 理解：说白了就是，不给子元素注册事件，给父元素注册事件，把处理代码在父元素的事件中执行。

• js事件中的委托：

  <ul>
        <li>知否知否，应该有弹框在手</li>
        <li>知否知否，应该有弹框在手</li>
        <li>知否知否，应该有弹框在手</li>
        <li>知否知否，应该有弹框在手</li>
        <li>知否知否，应该有弹框在手</li>
  </ul>

点击每个 li 都会弹出对话框，以前需要给每个 li 注册事件，是非常辛苦的，而且访问 DOM 的次数越多，这就会延长整个页面的交互就绪时间，那怎么解决呢？

2. 事件委托的原理

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

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

3. 事件委托的作用

• 我们只操作了一次 DOM ，提高了程序的性能。

• 动态新创建的子元素，也拥有事件。

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

4. 总结

• 事件委托，子元素委托父元素
• 什么情况下用事件委托：当要给一组元素添加相同事件时，可以直接添加给父亲
• 事件委托原理：事件冒泡，当触发子元素的事件时，通过冒泡，事件传递给父亲，父亲身上绑定有事件处理程序，进而触发