前言
在問題前,需要先理解事件冒泡、事件代理
可參考文章【事件代理】 動態數據列表裏,如何監聽每條數據的點擊?
具體實現如下:
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,若傳入,則爲代理綁定,需要過濾指定選擇器的綁定;若未傳入,則爲普通綁定 -不做過濾,所有選擇器綁定都有效