天天看點

《衆妙之門——JavaScript與jQuery技術精粹》——1.4 事件代理

本節書摘來自異步社群《衆妙之門——javascript與jquery技術精粹》一書中的第1章,第1.4節,作者: 【德】smashing magazine譯者: 吳達茄 芮鵬飛 更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。

事件使得網絡應用可以工作,我最愛事件,尤其是定制事件。它的存在,使得使用者不需要接觸核心代碼就可以使産品具有更好的可拓展性。但主要的問題(其實也是它的優勢)在于,事件會被html删除:對元素添加了事件螢幕後它将被激活,但在html中無法表示這種情況。可以這樣抽象地來考慮(這對初學者可能有困難):諸如ie6之類的浏覽器記憶體問題較多,事件處理量大,是以不要使用太多的事件處理是明智的選擇。

這裡就是事件代理 的來源。當某一特定的元素或者其上dom層的所有元素發生某一事件時,可以通過單一的處理程式對父元素進行處理來簡化事件處理過程,而不是使用大量的程式。

我的意思是什麼?比如說想要獲得一個連結清單,而且想要通過函數的調用而不是通過加載來獲得,其html實作方法如下:

《衆妙之門——JavaScript與jQuery技術精粹》——1.4 事件代理

通常事件處理程式是在整個連結中使用循環:

《衆妙之門——JavaScript與jQuery技術精粹》——1.4 事件代理

也可通過一個事件處理程式來實作:

《衆妙之門——JavaScript與jQuery技術精粹》——1.4 事件代理

因為單擊事件發生在清單中所有的元素之上,是以你所要做的就是将節點name與 需要響應事件的元素進行對比。

說明:以上例子在ie6浏覽器中會運作失敗。對于ie6,需要使用事件模型而不是w3c,這就是我們在這種情況下使用庫的原因。

這種方法的好處在于可以使用單獨的事件處理程式。例如,想要在清單中動态地進行添加操作,如果使用事件代理,則不需要進行任何改變,隻需在事件處理過程中重新配置設定處理程式并對清單重新進行循環操作就可以了。

繼續閱讀