前言
在問題前歪脏，需要先理解事件冒泡钞啸、事件代理
可參考文章【事件代理】 動態(tài)數(shù)據(jù)列表里襟齿，如何監(jiān)聽每條數(shù)據(jù)的點擊梯澜？
具體實現(xiàn)如下：
DOM節(jié)點：
<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>
實現(xiàn)邏輯：
//通用的事件監(jiān)聽函數(shù)
function bindEvent(elem, type, selector,fn) {
// step1.判斷傳參為 3 個還是 4 個
if (fn == null) {//
// 如果為3個，默認(rèn)第3個賦值為函數(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)檢索指定的值渴析，或找到一個或多個正則表達(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)
})
綜上所述實現(xiàn)原理：
Step1.判斷傳參為 3 個還是 4 個
Step2.給元素添加事件綁定
Step3.判斷是否傳入selector俭茧，若傳入咆疗，則為代理綁定，需要過濾指定選擇器的綁定母债；若未傳入午磁，則為普通綁定 -不做過濾，所有選擇器綁定都有效
