jQuery事件綁定方法學(xué)習(xí)總結(jié)(推薦)
對于jQuery中的事件綁定方法,主要有on()、bind()、delegate()、live()等這幾個方法。之前都是之前拿過來用,也知道有這么幾個方法,但是不清楚這幾個事件綁定方法之間的區(qū)別。平時用的最多的是on方法,今天打算整理一下。
bind方法
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>bind事件綁定</title> </head> <body> <div> <button id="btn">添加新的p元素</button> <p>第一個p元素</p> <p>第二個p元素</p> <p>第三個p元素</p> <p>第四個p元素</p> <p>第五個p元素</p> </div> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript"> //點擊添加一個新的元素 $("#btn").click(function(){ $("div").append("<p>這是一個新的p元素</p>"); }); //給所有的p元素綁定點擊事件 $("div p").click(function(){ alert($(this).text()); }); </script> </body> </html>
這種綁定事件的方式缺點:
當(dāng)頁面上p元素特別多的時候,會導(dǎo)致頁面上存在大量的事件處理程序,導(dǎo)致頁面性能差;
對于動態(tài)生成的新元素,不具有點擊事件。
對于這兩個缺點,我們可以通過下面即將要介紹的delegate方法來解決。
delegate方法
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>jQuery事件綁定</title> </head> <body> <div> <button id="btn">添加新的p元素</button> <p>第一個p元素</p> <p>第二個p元素</p> <p>第三個p元素</p> <p>第四個p元素</p> <p>第五個p元素</p> </div> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript"> $("#btn").click(function(){ $("div").append("<p>這是一個新的p元素</p>"); }); $("div").delegate("p", "click", function () { alert($(this).text()); }); </script> </body> </html>
上面的例子中我們使用事件委托的原理,利用delegate來綁定事件。
不直接為p元素綁定事件,而是為其父元素(或祖先元素)綁定事件,當(dāng)在div內(nèi)任意元素上點擊時,事件會一層層從event target(目標(biāo)元素)向上冒泡,直至到達你為其綁定事件的元素,如此例中的div元素。冒泡的過程中,如果事件的currentTarget與選擇器匹配時,就會執(zhí)行代碼。
這樣就解決了用bind()方法的上面兩個問題,不用再一個個地去為p元素綁定事件,有效減少了頁面上事件處理程序數(shù)量,也可以為動態(tài)添加進來的p元素綁定事件。
這種方式也是有缺陷的:這樣綁定是容易了,但是調(diào)用的時候也可能出現(xiàn)問題。如果事件目標(biāo)在DOM樹中很深的位置,這樣一層層冒泡上來查找與選擇器匹配的元素,又影響到性能了。
bind和delegate源碼實現(xiàn)
bind: function( types, data, fn ) { return this.on( types, null, data, fn ); }, unbind: function( types, fn ) { return this.off( types, null, fn ); }, delegate: function( selector, types, data, fn ) { return this.on( types, selector, data, fn ); }, undelegate: function( selector, types, fn ) { // ( namespace ) or ( selector, types [, fn] ) return arguments.length === 1 ? this.off( selector, "**" ) : this.off( types, selector || "**", fn ); }
從源碼中可以看出,無論bind()還是delegate()其實都是通過on()方法實現(xiàn)的,只是參數(shù)不同罷了。
on方法
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>jQuery事件綁定</title> </head> <body> <div> <button id="btn">添加新的p元素</button> <p>第一個p元素</p> <p>第二個p元素</p> <p>第三個p元素</p> <p>第四個p元素</p> <p>第五個p元素</p> </div> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript"> //給每一個p元素綁定點擊事件 $("div").on("click","p",function(){ alert($(this).text()); }); </script> </body> </html>
移除事件
對于bind()、delegate()和on()綁定方法,其移除事件的方法分別為:
$( "div p" ).unbind( "click", handler ); $( "div" ).undelegate( "p", "click", handler ); $( "div" ).off( "click", "p", handler );
小結(jié)
•選擇器匹配到的元素比較多時,不要用bind()迭代綁定;
•用id選擇器時,可以用bind();
•需要給動態(tài)添加的元素綁定時,用delegate()或者on();
•用delegate()和on()方法,dom樹不要太深;
•盡量使用on()。
以上這篇jQuery事件綁定方法學(xué)習(xí)總結(jié)(推薦)就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
- jQuery?事件綁定及取消?bind?live?delegate?on?one區(qū)別解析
- jquery事件綁定方法介紹
- jQuery事件綁定和解綁、事件冒泡與阻止事件冒泡及彈出應(yīng)用示例
- jQuery實現(xiàn)的事件綁定功能基本示例
- jQuery的三種bind/One/Live/On事件綁定使用方法
- jQuery 全選 全不選 事件綁定的實現(xiàn)代碼
- jquery移除了live()、die(),新版事件綁定on()、off()的方法
- 關(guān)于Jquery中的事件綁定總結(jié)
- jquery事件綁定解綁機制源碼解析
- jQuery事件綁定用法詳解
- 深入理解jQuery事件綁定
- jQuery事件綁定on()與彈窗實現(xiàn)代碼
- jQuery事件綁定用法詳解(附bind和live的區(qū)別)
- jQuery實現(xiàn)按鈕只點擊一次后就取消點擊事件綁定的方法
- JQuery中DOM事件綁定用法詳解
- jQuery事件綁定on()、bind()與delegate() 方法詳解
- jQuery事件綁定與解除綁定實現(xiàn)方法
- jquery中click等事件綁定及移除的幾種方法小結(jié)
相關(guān)文章
Jquery左右滑動插件之實現(xiàn)超級炫酷動畫效果附源碼下載
這是一款基于jquery.pogo-slider插件實現(xiàn)的多個滑塊切換特效。本篇文章給大家介紹Jquery左右滑動插件之實現(xiàn)超級炫酷動畫效果,對jquery左右滑動插件相關(guān)知識感興趣的朋友參考下2015-12-12jQuery增加、刪除及修改select option的方法
這篇文章主要介紹了jQuery增加、刪除及修改select option的方法,涉及jQuery針對form表單中select選項的常見操作技巧,需要的朋友可以參考下2016-08-08使用jQuery全局事件ajaxStart為特定請求實現(xiàn)提示效果的代碼
首先,重寫Ajax方法的代價太高,仍然可以利用jQuery自身的Ajax Events。2010-12-12jQuery插件pagination實現(xiàn)分頁特效
jQuery分頁插件示例,ajax方式的jQuery前端分頁插件,其核心代碼jquery.pagination.js已隨示例打包,Demo中包括了5種不同的分頁效果演示,全部是Ajax無刷新方式實現(xiàn)分頁,對于搞前端開發(fā)的朋友來說,這是個值得收藏的代碼特效,為以后實現(xiàn)無刷新分頁提供方便。2015-04-04jQuey將序列化對象在前臺顯示地實現(xiàn)代碼(方法總結(jié))
本文給大家分享jQuey將序列化對象在前臺顯示地的幾種方式,非常不錯,具有參考借鑒價值,需要的朋友一起看看吧2016-12-12JQuery 1.6發(fā)布 性能提升,同時包含大量破壞性變更
JQuery 1.6剛剛發(fā)布了,有幾處性能和跨瀏覽器兼容性的改進,專門重寫了屬性模塊2011-05-05