jQuery.live()与Event Delegation

网友Ark刚好问到live()，不知道大家有没有觉得jQuery. live()具有为”未来元素”设定事件的未卜先知能力很神奇?至少在乍听之余，我觉得很不可思议，莫非它要拦截所有建立元素的过程? 不对，难度很高、没效率、漏洞也很多，那么又是怎么做到的呢? 本草網目官方文件上有詳細的解釋，關鍵在Event Delegation 。 本草网目官方文件上有详细的解释，关键在Event Delegation 。 過去bind()時，會逐一在元素上設定事件，而Event Delegation則是利用事件會Bubble Up的特性，直接把事件掛在document上，網頁上的任何元素觸發事件時，document也會被觸發同樣的事件，透過event.target則可找出觸發事件的真實來源。过去bind()时，会逐一在元素上设定事件，而Event Delegation则是利用事件会Bubble Up的特性，直接把事件挂在document上，网页上的任何元素触发事件时，document也会被触发同样的事件，透过event.target则可找出触发事件的真实来源。 live()就是透過傳入的Selector比對target元素是否為鎖定對象，若在Selector範圍內，就執行指定的事件函數。 live()就是透过传入的Selector比对target元素是否为锁定对象，若在Selector范围内，就执行指定的事件函数。 這裡用個簡單的例子示範如何透過在document上掛click事件攔載的點擊。这里用个简单的例子示范如何透过在document上挂click事件拦载的点击。 (有興趣的人可以在Mini jQuery Lab親手玩看看) (有兴趣的人可以在Mini jQuery Lab亲手玩看看) Body HTML為 Body HTML为

Script為 Script为
$(document).click(function(e) { $(document).click(function(e) {
alert($(e.target).val() + “ is clicked!”); alert($(e.target).val() + “ is clicked!”);
}); }); 如此，我們雖然沒有$(“input:button”).click(fn)，一樣可以抓到按鈕的Click事件。如此，我们虽然没有$(“input:button”).click(fn)，一样可以抓到按钮的Click事件。 最後補充一下Event Delegation的優缺點。最后补充一下Event Delegation的优缺点。 它的優點為:它的优点为: 可降低Event Handler的數量，減少記憶體的使用，有利於效能與穩定性。可降低Event Handler的数量，减少记忆体的使用，有利于效能与稳定性。 例如那種要處理數萬個

事件的場合，就可以考慮。例如那种要处理数万个事件的场合，就可以考虑。
元素新增、移除、更動時，不用反覆掛載或卸除事件處理函數。元素新增、移除、更动时，不用反覆挂载或卸除事件处理函数。 缺點則是:缺点则是: 掛在document上的事件函數會在網頁上每一個元素被觸發事件時都被呼叫一次，由於執行頻率很高，若沒寫好可能重創效能。挂在document上的事件函数会在网页上每一个元素被触发事件时都被呼叫一次，由于执行频率很高，若没写好可能重创效能。
不是所有的事件都會浮到上層，例如: blur, focus, load, unload就不適用。不是所有的事件都会浮到上层，例如: blur, focus, load, unload就不适用。
應用在mouseover之類的滑鼠事件時需特別留意，由於呼叫頻率高，一樣要小心程式寫法以免拖垮效能。应用在mouseover之类的滑鼠事件时需特别留意，由于呼叫频率高，一样要小心程式写法以免拖垮效能。 了解了Event Delegation的持性，大家可以善用它有效率地滿足特定的情境需求囉!了解了Event Delegation的持性，大家可以善用它有效率地满足特定的情境需求啰! 转自：http://blog.darkthread.net/post-2009-03-15-jquery-live-and-event-delegation.aspx