過去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的持性,大家可以善用它有效率地滿足特定的情境需求囉!
转载自http://blog.darkthread.net/ 黑暗执行绪