手写通用的事件监听函数

前言

在问题前，需要先理解事件冒泡、事件代理

可参考文章【事件代理】 动态数据列表里，如何监听每条数据的点击？

具体实现如下：

DOM节点：

<div id="div3">
    <a href="#">a1</a><br>
    <a href="#">a2</a><br>
    <a href="#">a3</a><br>
    <a href="#">a4</a><br>
    <button>加载更多...</button>
</div>

实现逻辑：

//通用的事件监听函数
function bindEvent(elem, type, selector,fn) {
    // step1.判断传参为 3 个还是 4 个
    if (fn == null) {//
        // 如果为3个，默认第3个赋值为函数
        fn = selector
        selector=null
    }
    // step2.做事件绑定
    elem.addEventListener(type,event=>{
        const target =event.target
        //step3.判断是否传入selector
        if (selector) {
            //代理绑定 -过滤指定选择器的绑定
            if (target.matches(selector)) { //match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。
               fn.call(target,event) //call 改变this的指向，调用的事件指向当前选择的DOM元素
            }
        }else{
            //普通绑定 -不过滤所有选择器绑定都有效
            fn.call(target, event)
        }
        
    })
}

const div3 = document.getElementById('div3')
bindEvent(div3,'click','a',function(event){
    event.preventDefault();
    alert(this.innerHTML)
})

综上所述实现原理：
Step1.判断传参为 3 个还是 4 个
Step2.给元素添加事件绑定
Step3.判断是否传入selector，若传入，则为代理绑定，需要过滤指定选择器的绑定；若未传入，则为普通绑定 -不做过滤，所有选择器绑定都有效