Back to basics是一系列的小帖子，我在其中解釋了我在項(xiàng)目中一直使用的基本的、無(wú)依賴的web技術(shù)。這些都不是什么啟示，但是這些年來(lái)幫助我建立了牢固的，容易維護(hù)的項(xiàng)目。

在構(gòu)建web接口時(shí)，我最喜歡的一個(gè)技巧是事件委托

事件不僅僅發(fā)生在應(yīng)用它們的元素上。相反，它們沿著DOM樹(shù)一直到事件，然后再返回。事件生命周期的這些階段稱為事件冒泡和事件捕獲。

這樣做的實(shí)際結(jié)果是，您不需要對(duì)文檔中的每個(gè)元素應(yīng)用事件處理程序。相反，通常父元素上的一個(gè)處理程序就足夠了。在很久以前，這是非常重要的，因?yàn)槔系臑g覽器經(jīng)常有與事件處理有關(guān)的內(nèi)存泄漏。

假設(shè)你有一個(gè)鏈接列表，而不是遵循這些鏈接，你想做一些代碼時(shí)，用戶點(diǎn)擊他們:

這是可行的，但有兩個(gè)問(wèn)題:

1. 當(dāng)列表的內(nèi)容發(fā)生更改時(shí)，您需要重新索引該列表(如再次調(diào)用assignhandlers())

2. 您只對(duì)被單擊的鏈接作出反應(yīng)，如果您還想在單擊列表項(xiàng)時(shí)執(zhí)行某些操作，則需要分配更多的處理程序。

你可以試著在這個(gè)例子中點(diǎn)擊“切換更多的狗”按鈕。它向列表中添加更多項(xiàng)目，當(dāng)您單擊它們時(shí)，什么也不會(huì)發(fā)生。

您可以嘗試這里的事件委托示例，代碼可以在GitHub (event- delegate .html)上找到。如果你現(xiàn)在點(diǎn)擊“切換更多的狗”按鈕，并點(diǎn)擊任何小狗的鏈接，你會(huì)看到它仍然工作。

您可以做一些事情來(lái)確定單擊事件發(fā)生在哪個(gè)元素上。這里最重要的部分是“let t = e.target;”行，它存儲(chǔ)了當(dāng)前由事件捕獲/冒泡循環(huán)報(bào)告的元素。如果我想對(duì)一個(gè)鏈接做出反應(yīng)，我將檢查目標(biāo)上是否存在一個(gè)“href”。如果我想對(duì)列表項(xiàng)做出反應(yīng)，我將' nodeName '與' LI '進(jìn)行比較。注意，如果進(jìn)行這種檢查，節(jié)點(diǎn)名總是大寫(xiě)的。

我真的很喜歡事件委托，因?yàn)樗o了我更多的靈活性，而且我不必?fù)?dān)心內(nèi)容的變化。處理者只是躺在那里等待，直到需要它。