DOM事件委托

事件委托（事件代理）

概述：根据捕获与冒泡，如果我们有许多以类似方式处理的元素，那么就不必为每个元素都分配一个事件处理程序 —— 而是将单个处理程序放在它们的共同祖先上。

优点：

• 减少内存的使用（减少函数的使用）
• 可以监听动态元素

例子如下：

<ul id="myLink">
    <li id="1">aaa</li>
    <li id="2">bbb</li>
    <li id="3">ccc</li>
</ul>

 

我们若要给其中的每个<li>标签都加上一个点击事件。

简易版：

 ul.addEventListener('click', function(e){
     if(e.target.tagName.toLowerCase() === 'li'){
         fn() // 执行某个函数
     }
 })

 

高级版：

function delegate(element, eventType, selector, fn) {
     element.addEventListener(eventType, e => {
       let el = e.target
       while (!el.matches(selector)) {
         if (element === el) {
           el = null
           break
         }
         el = el.parentNode
       }
       el && fn.call(el, e, el)
     })
     return element
   }

递归查找祖先元素，直到被监听元素为止。