手寫通用的事件監聽函數

前言

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

可參考文章【事件代理】 動態數據列表裏,如何監聽每條數據的點擊?

具體實現如下:

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,若傳入,則爲代理綁定,需要過濾指定選擇器的綁定;若未傳入,則爲普通綁定 -不做過濾,所有選擇器綁定都有效

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章