JavaScript的事件代理如何實(shí)現(xiàn)

本篇內(nèi)容介紹了“JavaScript的事件代理如何實(shí)現(xiàn)”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

JavaScript事件代理則是一種簡單的技巧，通過它你可以把事件處理器添加到一個父級元素上，這樣就避免了把事件處理器添加到多個子級元素上。

它是怎么運(yùn)作的呢？

事件代理用到了兩個在JavaSciprt事件中常被忽略的特性：事件冒泡以及目標(biāo)元素。當(dāng)一個元素上的事件被觸發(fā)的時候，比如說鼠標(biāo)點(diǎn)擊了一個按鈕，同樣的事件將會在那個元素的所有祖先元素中被觸發(fā)。這一過程被稱為事件冒泡；這個事件從原始元素開始一直冒泡到DOM樹的最上層。對任何一個事件來說，其目標(biāo)元素都是原始元素，在我們的這個例子中也就是按鈕。目標(biāo)元素它在我們的事件對象中以屬性的形式出現(xiàn)。使用事件代理的話我們可以把事件處理器添加到一個元素上，等待事件從它的子級元素里冒泡上來，并且可以很方便地判斷出這個事件是從哪個元素開始的。

這對我有什么好處呢？

想象一下現(xiàn)在我們有一個10列、100行的HTML表格，你希望在用戶點(diǎn)擊某一單元格的時候做點(diǎn)什么。比如說有一次我就需要讓表格中的每一個單元格在被點(diǎn)擊的時候變成可編輯狀態(tài)。如果把事件處理器加到這1000個單元格將會產(chǎn)生一個很大的性能問題，并且有可能導(dǎo)致內(nèi)存泄露甚至是瀏覽器的崩潰。相反地，使用事件代理的話，你只需要把一個事件處理器添加到table元素上就可以了，這個函數(shù)可以把點(diǎn)擊事件給截下來，并且判斷出是哪個單元格被點(diǎn)擊了。

用代碼寫出來的話是什么樣呢？

代碼很簡單，我們所要關(guān)心的只是如何檢測目標(biāo)元素而已。比方說我們有一個table元素，ID是“report”，我們?yōu)檫@個表格添加一個事件處理器以調(diào)用editCell函數(shù)。editCell函數(shù)需要判斷出傳到table來的事件的目標(biāo)元素?？紤]到我們要寫的函數(shù)中可能會重復(fù)用到這一功能，所以我們把它單獨(dú)放到一個名為getEventTarget的函數(shù)中：

function getEventTarget(e) {
  e = e || window.event;
  return e.target || e.srcElement;
}

e這個變量表示的是一個事件對象，我們只需要寫一點(diǎn)點(diǎn)跨瀏覽器的代碼來返回目標(biāo)元素。在IE里目標(biāo)元素放在srcElement屬性中，而在其它瀏覽器里則是target屬性。

接下來就是editCell函數(shù)了，這個函數(shù)調(diào)用到了getEventTarget函數(shù)。一旦我們得到了目標(biāo)元素之后，剩下的事情就是看看它是否是我們所需要的那個元素了。

function editCell(e) {
  var target = getEventTarget(e);
  if(target.tagName.toLowerCase() === 'td') {
    // DO SOMETHING WITH THE CELL
  }
}

在editCell函數(shù)中，我們通過檢查目標(biāo)元素標(biāo)簽名稱的方法來確定它是否是一個表格的單元格。這種檢查也許過于簡單了點(diǎn)；如果它是這個目標(biāo)元素單元格里的另一個元素呢？我們需要為代碼做一點(diǎn)快速修改以便于其找出我們所需要的那個父級的td元素。如果說有些單元格不需要被編輯怎么辦呢？此種情況下我們可以為那些不可編輯的單元格添加一個指定的樣式名稱，然后在把單元格變成可編輯狀態(tài)之前先檢查它是否不包含那個樣式名稱。選擇總是多樣化的，你只需找到適合你應(yīng)用程序的那一種就可以了。

有哪些優(yōu)點(diǎn)和缺點(diǎn)呢？

JavaScript事件代理帶來的好處有：

◆那些需要創(chuàng)建的以及駐留在內(nèi)存中的事件處理器少了。這是很重要的一點(diǎn)，我們得到了性能上的提升，同時降低了崩潰的風(fēng)險。

◆在DOM更新后無須重新綁定事件處理器了。如果你的頁面是動態(tài)生成的，比如說通過Ajax，你不需要再在元素被載入或者卸載的時候來添加或者刪除事件處理器了。

◆潛在的問題也許并不那么明顯，但是一旦你注意到這些問題，你就可以輕松地避免它們：

◆你的事件管理代碼有成為性能瓶頸的風(fēng)險，所以盡量使它能夠短小精悍。

◆不是所有的事件都能冒泡的。blur、focus、load和unload不能像其它事件一樣冒泡。事實(shí)上blur和focus可以用事件捕獲而非事件冒泡的方法獲得（在非IE的瀏覽器中），不過我們改天再說這個吧。

◆在管理鼠標(biāo)事件的時候有些需要注意的地方。如果你的代碼處理mousemove事件的話你遇上性能瓶頸的風(fēng)險可就大了，因?yàn)閙ousemove事件觸發(fā)得非常頻繁。而mouseout則因?yàn)槠涔之惖谋憩F(xiàn)而變得很難用事件代理來管理。

“JavaScript的事件代理如何實(shí)現(xiàn)”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！