jQuery.live()與Event Delegation

本文深入解析EventDelegation的概念及其优势,通过示例演示如何在document上挂载点击事件来监听<input>按钮的点击操作,同时强调其适用范围和注意事项。了解EventDelegation能有效提升网页事件处理的效率与稳定性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

過去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/ 黑暗执行绪

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值