手写事件委托

概念：
把一个元素的响应事件绑定到另外一个函数身上。

好处：
1、节省监听器；
2、实现动态监听。

坏处：
调试比较复杂，不容易确定监听者。

解决办法：
1、没办法解决。
2、但浏览器的控制台有个 Event Listeners ，可以查看到是谁在监听。

代码实现：
版本一：如果点击的是 li 里面的 span，则没有办法触发事件

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

版本二：对 span 进行递归遍历，查看 span 的祖先标签中有没有ul里面的 li

function delegate(element, eventType, selector, fn) {
    element.addEventListener(eventType, e => {
        let el = e.target;  // span
        while (!el.matches(selector)) {  // span 
            if (el === element) {  // 找到一个祖先为ul，即证明该 span 不需要触发事件
                el = null
                break
            }
            el = el.parentNode // 递归其祖先
        }
        el && fn.call(el, e, el) // 如果 el 不为空，则运行 fn 函数
    })
    return element
}

// 测试
delegate(ul, 'click', 'li', () => { console.log('hi') })