事件委托.md

说明

该笔记文件是最近整理dom相关知识时，将先前记录的笔记进行整理打包，复制于此。

概念：

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

好处：

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') })