一、概念

事件委托，用白话来讲就是将事件监听交给自己的祖先元素进行处理。

二、原理

事件委托的实现是根据事件冒泡实现的,利用事件冒泡的特性。对于父元素使用事件监听，当父盒子里面的某个元素被触发时，向上冒泡，触发父元素的事件。利用 target 后去触发冒泡事件的元素。

  1. <ul id="father">
  2.     <li>one</li>
  3.     <li>two</li>
  4.     <li>three</li>
  5.     <li>four</li>
  6. </ul>
  7. <script>
  8.     let domUl = document.querySelector('#father')
  9.     domUl.addEventListener('click', (e) => {
  10.         if (e.target.nodeName.toLowerCase() == 'li') {
  11.             console.log(e.target)
  12.         }
  13.     })
  14. </script>

通过 target 下的 nodeName 属性判断。是否是我们需要监听的元素。

三、优点

  • 可以节省大量内存
  • 可以监听动态元素

注意：事件委托需要依赖事件冒泡，如果不支持事件冒泡的元素没办法使用事件委托。