在準備js面試題時，遇到了許多知識盲區，或是已經遺忘的知識，所以來寫一下博客，記錄自己的成長，同時查漏補缺
這次來寫一個通用的事件監聽函式，基于我們的事件冒泡，如果你不知道事件冒泡
需求，點擊每個a，回傳對應的內容
<div id="div">
<a id="p1" href="#">激活</a>
<a id="p2" href="#">取消</a>
<a id="p3" href="#">取消</a>
<a id="p4" href="#">取消</a>
<a id="p5" href="#">激活</a>
<a id="p6" href="#">取消</a>
<a id="p7" href="#">取消</a>
<a id="p8" href="#">取消</a>
<button class="btn">加載更多...</button>
</div>先封裝一個函式，看代碼
function bindEvent(elem, type, fn) {
elem.addEventListener(type,fn)
}
//呼叫時，如
bindEvent(div,'click',function(){})是這樣嗎？當然不是，要是這么簡單那面試時就沒什么可問的了
我們寫的要考慮上事件代理這個情況讓這個函式可以使用事件代理，也可以不用事件代理
function bindEvent(elem, type, selector, fn) {
//判斷一下，如果我們只傳入三個值，那就是普通函式
//如果是傳入四個引數，那就是使用事件代理
//selector是我們要代理的物件，如果沒有，那就不是使用事件代理
if(fn == null) {
fn = selector
selector = null
}
elem.addEventListener(type, function(e) {
const target = e.target
if(selector) {
//使用事件代理
if(target.matches(selector)) {
//這matches主要是用來判斷當前DOM節點是否能完全匹配對應的CSS選擇器規則；
//如果匹配成功，返 回true，反之則回傳false
//可以理解為當我們傳入的selector===target.nodeName，回傳true，否則false
fn.call(target, e)
//使用call函式，方便我們使用this指向我們點擊的元素
}
}else {
//普通呼叫
fn.call(target, e)
}
})
}
使用代理時
bindEvent(div1,'click','a',function() {
alert(this.innerHTML)
})
//點擊每個a時，都可以alert出a的值使用普通函式時
bindEvent(div1,'click',function(e) {
const target = e.target
if(target.nodeName === 'A') {
alert(target.innerHTML)
}
})
//點擊每個a時，都可以彈出相對應的值轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/305709.html
標籤：其他