前言

在問題前，需要先理解事件冒泡、事件代理

可參考文章【事件代理】 動(dòng)態(tài)數(shù)據(jù)列表里，如何監(jiān)聽每條數(shù)據(jù)的點(diǎn)擊？

具體實(shí)現(xiàn)如下：

DOM節(jié)點(diǎn)：

<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>

實(shí)現(xiàn)邏輯：

//通用的事件監(jiān)聽函數(shù)
function bindEvent(elem, type, selector,fn) {
    // step1.判斷傳參為 3 個(gè)還是 4 個(gè)
    if (fn == null) {//
        // 如果為3個(gè)，默認(rèn)第3個(gè)賦值為函數(shù)
        fn = selector
        selector=null
    }
    // step2.做事件綁定
    elem.addEventListener(type,event=>{
        const target =event.target
        //step3.判斷是否傳入selector
        if (selector) {
            //代理綁定 -過濾指定選擇器的綁定
            if (target.matches(selector)) { //match() 方法可在字符串內(nèi)檢索指定的值，或找到一個(gè)或多個(gè)正則表達(dá)式的匹配。
               fn.call(target,event) //call 改變this的指向，調(diào)用的事件指向當(dāng)前選擇的DOM元素
            }
        }else{
            //普通綁定 -不過濾所有選擇器綁定都有效
            fn.call(target, event)
        }
        
    })
}

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

綜上所述實(shí)現(xiàn)原理：
Step1.判斷傳參為 3 個(gè)還是 4 個(gè)
Step2.給元素添加事件綁定
Step3.判斷是否傳入selector，若傳入，則為代理綁定，需要過濾指定選擇器的綁定；若未傳入，則為普通綁定 -不做過濾，所有選擇器綁定都有效