JavaScript 事件委托

事件委托

事件流

• 事件触发
  • 用户操作，触发事件。
• 事件捕获
  • 事件触发之后，浏览器会从window对象开始一层层向下捕获事件事件触发对象。
• 事件处理阶段
  • 当事件捕获到事件触发对象时，事件捕获结束，开始事件处理。
• 事件冒泡
  • 当事件处理完成后，进入事件冒泡阶段，浏览器从事件触发对象开始一层层向上冒泡（触发事件），直到window对象结束。

事件委托

• 概念
  • 事件委托，也叫事件代理，是JavaScript中绑定事件的一种常用技巧。就是将原本需要绑定在子元素的响应事件（click、keydown…）委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。

问题场景

• 有一个ul，里面有10个 li，我要点击 li 时，把我点击的这个li 的文字颜色变成红色。

解决方案

• 方案一
  • 给10个li 全部绑定点击事件，当li 被点击时，改变被点击的li 的文字颜色。
  • 代码

      <ul>
        <li>我是第1个li</li>
        <li>我是第2个li</li>
        <li>我是第3个li</li>
        <li>我是第4个li</li>
        <li>我是第5个li</li>
        <li>我是第6个li</li>
        <li>我是第7个li</li>
        <li>我是第8个li</li>
        <li>我是第9个li</li>
        <li>我是第10个li</li>
      </ul>
    
      <script>
        const lis = document.querySelectorAll('li')
    
        // 方案一 全部添加 点击事件
        lis.forEach((item, index) => {
          item.addEventListener('click', function (e) {
            e.target.style.color = 'red';
          })
        })
        
      </script>
    

  • 效果
    
• 方案二
  • 利用事件委托，在 ul 上监听点击事件
  • 代码

        // 方案二 给 ul 添加点击事件
        const ul = document.querySelector('ul')
        ul.addEventListener('click', function(e) {
          e.target.style.color = 'red';
        }) 
    

  • 效果
    

总结：

• 事件委托就是将子元素的事件监听放到父元素上，通过事件冒泡来监听所有子元素的同类事件，通过e.target 来获取事件触发对象。
• 绑定事件的addEventListener 的参数
  • 事件类型 不要加 on
  • 事件处理函数
  • 布尔值/对象
    • 布尔值 该事件是否采用 捕获 （不捕获就冒泡）
    • 对象
      • once：只执行一次。
      • passive：承诺此事件监听不会调用preventDefault，这有助于性能。
      • useCapture：是否捕获（否则冒泡）。