jQuery.live()與Event Delegation

網友Ark剛好問到live()，不知道大家有沒有覺得jQuery.live()具有為"未來元素"設定事件的未卜先知能力很神奇? 至少在乍聽之餘，我覺得很不可思議，莫非它要攔截所有建立元素的過程? 不對，難度很高、沒效率、漏洞也很多，那麼又是怎麼做到的呢?

本草網目官方文件上有詳細的解釋，關鍵在Event Delegation。

過去bind()時，會逐一在元素上設定事件，而Event Delegation則是利用事件會Bubble Up的特性，直接把事件掛在document上，網頁上的任何元素觸發事件時，document也會被觸發同樣的事件，透過event.target則可找出觸發事件的真實來源。live()就是透過傳入的Selector比對target元素是否為鎖定對象，若在Selector範圍內，就執行指定的事件函數。

這裡用個簡單的例子示範如何透過在document上掛click事件攔載<input type="button">的點擊。(有興趣的人可以在Mini jQuery Lab親手玩看看)

Body HTML為
<input type="button" id="btn1" value="Button1" />
<input type="button" id="btn2" value="Button2" />

Script為
$(document).click(function(e) {
    alert($(e.target).val() + " is clicked!");
});

如此，我們雖然沒有$("input:button").click(fn)，一樣可以抓到按鈕的Click事件。

最後補充一下Event Delegation的優缺點。它的優點為:

• 可降低Event Handler的數量，減少記憶體的使用，有利於效能與穩定性。例如那種要處理數萬個<td>事件的場合，就可以考慮。
• 元素新增、移除、更動時，不用反覆掛載或卸除事件處理函數。

缺點則是:

• 掛在document上的事件函數會在網頁上每一個元素被觸發事件時都被呼叫一次，由於執行頻率很高，若沒寫好可能重創效能。
• 不是所有的事件都會浮到上層，例如: blur, focus, load, unload就不適用。
• 應用在mouseover之類的滑鼠事件時需特別留意，由於呼叫頻率高，一樣要小心程式寫法以免拖垮效能。

了解了Event Delegation的持性，大家可以善用它有效率地滿足特定的情境需求囉!