深入理解jQuery中l(wèi)ive與bind方法的區(qū)別

更新時(shí)間：2013年12月18日 09:44:28 作者：

本篇文章主要是對(duì)jQuery中l(wèi)ive與bind方法的區(qū)別進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助

注意如果是通過jq添加的層和對(duì)象一定要用live（），用其他的都不起作用

live的缺點(diǎn)就是，運(yùn)行完以后不釋放空間，太多的使用會(huì)占用更多的內(nèi)存，bind（）則點(diǎn)擊完以后釋放空間

區(qū)別一：

Click here

可以給這個(gè)元素綁定一個(gè)簡(jiǎn)單的click事件：

$('.clickme').bind('click', function() {
$('body').append('

Another target
');
});

當(dāng)點(diǎn)擊了元素，就會(huì)彈出一個(gè)警告框。然后，想象一下這之后有另一個(gè)元素添加進(jìn)來了。

盡管這個(gè)新的元素也能夠匹配選擇器 ".clickme" ，但是由于這個(gè)元素是在調(diào)用 .bind() 之后添加的，所以點(diǎn)擊這個(gè)元素不會(huì)有任何效果。

.live() 就提供了對(duì)應(yīng)這種情況的方法。如果我們是這樣綁定click事件的：

$('.clickme').live('click', function() {
alert("Live handler called.");
});

然后再添加一個(gè)新元素：

$('body').append('

Another target
');

然后再點(diǎn)擊新增的元素，他依然能夠觸發(fā)事件處理函數(shù)。

區(qū)別二：

（1）bind方法可以綁定任何JavaScript的事件，而live方法在jQuery1.3的時(shí)候只支持click, dblclick, keydown, keypress,keyup,mousedown, mousemove, mouseout, mouseover, 和 mouseup.在jQuery 1.4.1中，甚至也支持 focus 和 blue事件了（映射到更合適，并且可以冒泡的focusin和focusout上）。另外，在jQuery 1.4.1中，也能支持hover（映射到"mouseenter mouseleave"）。

（2）live() 并不完全支持通過DOM遍歷的方法找到的元素。取而代之的是，應(yīng)當(dāng)總是在一個(gè)選擇器后面直接使用 .live()方法。

（3）當(dāng)一個(gè)元素采用live方法進(jìn)行事件的綁定的時(shí)候，如果想阻止事件的傳遞或冒泡，就要在函數(shù)中return false,僅僅調(diào)用stopPropagation()是無法實(shí)現(xiàn)阻止事件的傳遞或者冒泡的

您可能感興趣的文章:

相關(guān)文章

jQuery 源碼分析筆記(2) 變量列表
在初始化jQuery對(duì)象的代碼開始之前聲明了一大堆變量。主要包括：全局變量的備份；處理字符串用的正則表達(dá)式；檢測(cè)瀏覽器的正則表達(dá)式；對(duì)核心函數(shù)的引用備份。這里略過大部分，只說兩種：全局變量和瀏覽器檢測(cè)。
2011-05-05
使用jquery獲取網(wǎng)頁(yè)中圖片高度的兩種方法
使用jquery獲取網(wǎng)頁(yè)中圖片的高度其實(shí)很簡(jiǎn)單，目前有兩種不錯(cuò)的方法可以實(shí)現(xiàn)，下面為大家詳細(xì)介紹下，有所疑惑的你可以參考下
2013-09-09
jquery果凍抖動(dòng)效果實(shí)現(xiàn)方法
這篇文章主要介紹了jquery果凍抖動(dòng)效果實(shí)現(xiàn)方法,涉及animate方法的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-01-01
jqGrid表格應(yīng)用之新增與刪除數(shù)據(jù)附源碼下載
jqGrid可以結(jié)合fancybox等插件完成超酷的彈出層效果，通過與php后臺(tái)交互，可以輕松完成數(shù)據(jù)的添加與詳情查看，而這個(gè)過程完全是一個(gè)ajax異步通信過程，是一個(gè)非常友好的富客戶端應(yīng)用，本文給大家介紹jqGrid表格應(yīng)用之新增與刪除數(shù)據(jù)，需要的朋友參考下
2015-12-12
功能強(qiáng)大的jquery.validate表單驗(yàn)證插件
這篇文章主要為大家詳細(xì)介紹了功能強(qiáng)大的jquery.validate表單驗(yàn)證插件,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-11-11
jquery Firefox3.5中操作select的問題
不過最近安裝了FF3.5正式版，發(fā)現(xiàn)這種方法在它下面得不到值，就去看jquery的幫助文檔，在文檔中對(duì)select選中的引用是用如下方法
2009-07-07
解決IE7中使用jQuery動(dòng)態(tài)操作name問題
IE7中無法使用Jquery動(dòng)態(tài)操作頁(yè)面元素的name屬性，怎么解決這個(gè)問題呢？下面小編給大家?guī)砹私鉀QIE7中使用jQuery動(dòng)態(tài)操作name問題，需要的朋友參考下吧
2017-08-08
jQuery實(shí)現(xiàn)右側(cè)顯示可向左滑動(dòng)展示的深色QQ客服效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)右側(cè)顯示可向左滑動(dòng)展示的深色QQ客服效果代碼,涉及jQuery控制頁(yè)面元素樣式動(dòng)態(tài)變換的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-10-10
jQuery使用ajax跨域獲取數(shù)據(jù)的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄猨Query使用ajax跨域獲取數(shù)據(jù)的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-05-05
jQuery對(duì)象初始化的傳參方式
本文簡(jiǎn)單介紹了jQuery對(duì)象初始化傳參方式，以及具體的示例，是篇非常不錯(cuò)的文章，這里推薦給小伙伴們。
2015-02-02