快捷導(dǎo)航

JavaScript 事件代理需要注意的地方

更新時(shí)間：2020年09月08日 08:57:03 作者：前端小蜜蜂

這篇文章主要介紹了JavaScript 事件代理需要注意的地方，幫助大家更好的理解和學(xué)習(xí)JavaScript，感興趣的朋友可以了解下

我們知道，如果給 form 里面的 button 元素綁定事件，需要考慮它是否會(huì)觸發(fā) form 的 submit 行為。除此之外，其它場(chǎng)合給 button 元素綁定事件，你幾乎不用擔(dān)心這個(gè)事件會(huì)有什么非預(yù)期的附加效果，很自然地會(huì)這樣寫(xiě)事件處理代碼：

var button = document.querySelector('button')
button.addEventListener('click', function (e) {
 console.log('點(diǎn)擊了按鈕')
})

你之所以放心這么寫(xiě)，是因?yàn)檫@個(gè) button 元素沒(méi)有使用事件代理，即沒(méi)有代理任何子元素的事件。

事件代理的意思是，你要為一個(gè)元素綁定事件，但你不是直接把事件綁定到這個(gè)元素自己身上，而是綁定到這個(gè)元素的父元素上。當(dāng)子元素的某個(gè)事件（比如點(diǎn)擊事件）觸發(fā)時(shí)，它的父元素相同的事件也會(huì)觸發(fā)（我們常說(shuō)的事件冒泡），此時(shí)我們說(shuō)父元素代理了子元素的事件。

舉個(gè)例子，比如一個(gè) button 元素中包含一個(gè)齒輪圖標(biāo)：

<button>
 <svg>
 <use xlink:href="#gear" rel="external nofollow" ></use>
 </svg>
</button>

當(dāng)用戶(hù)點(diǎn)擊齒輪圖標(biāo)，必然要觸發(fā) click 事件，但你并不會(huì)直接綁定事件到 svg 或 use 元素上，而是綁定到它們的父元素 button 上。即：

document.querySelector('button').addEventListener('click', function (e) {
 console.log('點(diǎn)擊了按鈕')
})

這種情況，我們可以說(shuō)，button 元素代理了它的所有子元素的 click 事件。

但是，出現(xiàn)這種事件代理的情況時(shí)，我們就得小心了。

為了更直觀地說(shuō)明問(wèn)題，我們把“父”元素上升到頂層的 document 元素：

document.documentElement.addEventListener('click', function (e) {
 console.log('我被點(diǎn)擊了')
})

只要網(wǎng)頁(yè)中任意一個(gè)位置被點(diǎn)擊了，都會(huì)觸發(fā)綁定在 document 元素上的點(diǎn)擊事件。想要知道事件具體是發(fā)生在哪個(gè)元素上面，可以通過(guò)事件對(duì)象提供的 target 屬性來(lái)判斷。

document.documentElement.addEventListener('click', function (e) {
 console.log(e.target)
})

我們很容易知道事件具體是發(fā)生在哪個(gè)元素身上的。于是在上面的示例中，如果父元素 document 想在按鈕被點(diǎn)擊時(shí)做點(diǎn)什么事情，我們很自然地會(huì)這么寫(xiě)：

document.documentElement.addEventListener('click', function (e) {
 if (e.target.tagName === 'BUTTON') {
 console.log('按鈕被點(diǎn)擊了')
 }
})

這時(shí)問(wèn)題就出現(xiàn)了，按鈕即使被點(diǎn)擊了 if 條件也不一定成立，即也不一定會(huì)輸出“按鈕被點(diǎn)擊了”。因?yàn)橛脩?hù)在按鈕上的某個(gè)位置點(diǎn)擊了，根據(jù)用戶(hù)點(diǎn)擊的位置，e.target 可能是下面三種情況：

BUTTON 元素
SVG 元素
USE 元素

實(shí)際的情況是這樣的：

我們真正的意圖是，只要點(diǎn)擊是發(fā)生在按鈕上面，不論是按鈕的哪個(gè)位置，我們都應(yīng)視為按鈕被點(diǎn)擊了。嗯，簡(jiǎn)單，我們?cè)俑囊幌?，這樣寫(xiě)：

document.documentElement.addEventListener('click', function (e) {
 if (['BUTTON', 'SVG', 'USE'].includes(e.target.tagName.toUpperCase())) {
 // 點(diǎn)擊的是按鈕
 }
})

這樣似乎沒(méi)什么問(wèn)題，也確實(shí)可以達(dá)到目的，但看上去總是有些別扭。因?yàn)檫@種情況對(duì)于最上層的 document 來(lái)說(shuō)，得知道每個(gè)子元素的情況，本來(lái)我只需要關(guān)心離我最近的 button 元素就可以了。

根據(jù) OOP 對(duì)內(nèi)封裝的思想，button 元素內(nèi)部的事情應(yīng)該在內(nèi)部消化掉，其子元素對(duì)外不可見(jiàn)，應(yīng)該只暴露 button 元素本身。依據(jù)這個(gè)思想和事件冒泡的特點(diǎn)，我們就有了比較好的解決辦法：只需要禁止 button 內(nèi)部元素的事件響應(yīng)（包括事件冒泡）而只允許 button 元素本身的事件發(fā)生就行。有兩種方式可以實(shí)現(xiàn)這個(gè)目的。

一種是使用 CSS 禁止 button 內(nèi)部元素的事件響應(yīng)：

button > * {
 pointer-events: none;
}

另一種是使用 JS 來(lái)阻止 button 內(nèi)部元素的事件響應(yīng)（包括事件冒泡）：

document.querySelector('button > svg').addEventListener('click', function (e) {
 e.stopPropagation()
 e.preventDefault()
})

document.querySelector('button').addEventListener('click', function (e) {
 console.log(e.target.tagName)
})

這兩種方式都能達(dá)到我們預(yù)期的效果：