大家好，我是IT修真院武漢分院第10期學(xué)員余佳貝，一枚正直善良的web程序員。
今天給大家分享一下，修真院官網(wǎng)js任務(wù)3，深度思考中的知識點(diǎn)——jQuery中的bind(),live(),delegate(),on()有什么區(qū)別？
一.背景介紹
在學(xué)習(xí)和實(shí)踐jquery框架的過程中，由于開始，只是使用的《鋒利的Jquery》中綁定事件的方法，只認(rèn)識到了bind()的方法。而該書是基于jquery1.7.1編寫的，目前最新的版本已經(jīng)到了3.2。對于綁定事件的方法做了調(diào)整。后來發(fā)現(xiàn)還有l(wèi)ive()、delegate()、on()的方法，它們之間有什么樣的區(qū)別呢？我們來學(xué)習(xí)討論一下。
二.知識剖析
2.1 bind()方法
bind()方法用于對匹配的元素進(jìn)行特定事件的綁定。它直接綁定在現(xiàn)有的元素節(jié)點(diǎn)上，也很好的解決了瀏覽器在事件處理中的兼容問題。例如，它的調(diào)用格式如下：
bind(type, [data], fn) //事件類型(必選)，傳遞的參數(shù)(可選)，相關(guān)的函數(shù)$('a').bind('click',function(){alert('that tickles!')})
JQuery掃描文檔找出所有的$(‘a(chǎn)’)元素，并把a(bǔ)lert函數(shù)綁定到每個元素的click事件上。
2.2 live()方法
live()是事件委托的概念來執(zhí)行，把節(jié)點(diǎn)的處理委托給了document，向當(dāng)前或未來的匹配元素添加一個或多個事件處理器。
live(type, [data], fn) //事件類型(必選)，傳遞的參數(shù)(可選)，相關(guān)的函數(shù)
$('a').live('click',function(){alert('That tickles!')})
它是將函數(shù)綁定到$(document)元素上，并使用'click'和'a'作為參數(shù)。只要有事件冒泡到document節(jié)點(diǎn)上，它就查看該事件是否是一個click事件，以及該事件的目標(biāo)元素與'a'這一CSS選擇器是否匹配，如果都是的話，則執(zhí)行函數(shù)。
2.3 delegate()方法
delegate()方法的行為有點(diǎn)類似live()。但是不是把選擇器和事件的信息附加到了document上，而是可以自行選擇它要附加的DOM元素，這個技術(shù)可以讓事件的委托正常工作。我們的選擇又多了一些靈活性，不單可以利用事件委托，還可以選擇委托的對象。它適用于當(dāng)前或未來的元素（比如由腳本創(chuàng)建的新元素）。
delegate(selector,[type],[data],fn)//元素節(jié)點(diǎn)(字符串形式，一般是子級元素childselector)，事件類型，傳遞的參數(shù)(可選)，相關(guān)的函數(shù)$('#container').delegate('a','click',function(){ alert("That tickles!") });
JQuery掃描文檔查找$(‘#container’)，并使用click事件和’a’這一CSS選擇器作為參數(shù)把a(bǔ)lert函數(shù)綁定到$(‘#container’)上。任何時候只要有事件冒泡到$(‘#container’)上，它就查看該事件是否是click事件，以及該事件的目標(biāo)元素是否與CCS選擇器相匹配。如果兩種檢查的結(jié)果都為真的話，它就執(zhí)行函數(shù)。
2.4 on()方法
on()方法綁定事件處理程序到當(dāng)前選定的jQuery對象中的元素。它是在1.7版本中被提出來的，提供綁定事件處理程序所需的所有功能。用于替換 bind()、delegate()和 live()。
on(events,[selector],[data],fn) // 事件類型，元素節(jié)點(diǎn)(可選)，傳遞的參數(shù)(可選)，相關(guān)的函數(shù)
三.常見問題
問題: bind(),live(),delegate(),on()的特點(diǎn)及區(qū)別？
四.解決方案
bind()的特點(diǎn)：直接綁定在已經(jīng)存在的元素上，但是對在它執(zhí)行完后動態(tài)添加的那些元素上不起作用。因?yàn)橹苯咏壎ㄔ诰唧w的元素上，響應(yīng)事件及時，它是出現(xiàn)最早的一種綁定事件的方法。這種方法很浪費(fèi)資源，引起性能問題，因?yàn)樗ヅ溥x擇器中的每一項(xiàng)并且挨個設(shè)置相同的事件處理程序。如果在頁面加載前要處理添加事件的話，會影響加載效率的。在jquery1.7版本以前比較受推崇。在jquery1.7版本之后，官方推薦使用on()方法代替。在jquery3.0版本之后，已經(jīng)刪除該方法。
live()的特點(diǎn)：與bind()的實(shí)現(xiàn)原理卻不同。live()方法附加事件處理程序在document上通過冒泡來關(guān)聯(lián)匹配到相應(yīng)的元素和事件信息。對新添加的元素依然有效。不需要在每個元素上去綁定事件，而只在document上綁定一次就可以了?？梢栽赿ocument ready之前就可以綁定那些需要的事件。但是jquery1.9版本之后，已經(jīng)被棄用了。
delegate()方法的特點(diǎn)：更精確的小范圍使用事件代理，性能優(yōu)于live()。它可以自由選擇附加的選擇器和事件信息的位置，把事件綁定到具體元素的上一級較穩(wěn)定（不會動態(tài)地添加或者刪除、變化）的元素上，縮短了事件冒泡的路徑。同樣對新添加的元素依然有效。在jquery3.0版本之后，已經(jīng)刪除該方法。
on()的特點(diǎn)：是以上三種方法的統(tǒng)一?？梢允褂靡粋€方法，設(shè)置不同參數(shù)值來實(shí)現(xiàn)上述三種方法的功能。簡化了jQuery代碼庫，并刪除一個界別的重定向。
五.編碼實(shí)戰(zhàn)
六.拓展思考
如何刪除一個事件
$(document).ready(function(){
$("body").on("click","p",changeSize);
$("body").on("click","p",changeSpacing);
$("button").click(function(){
$("body").off("click","p");
});
});
七.參考文獻(xiàn)
jQuery四種事件綁定方式.bind(),.live(),.delegate(),on()的區(qū)別
jQuery中.bind() .live() .delegate() .on()區(qū)別
jQuery中bind(),live(),delegate(),on()綁定事件方法實(shí)例詳解
八.更多討論
以上介紹到的jQuery事件方法的知識點(diǎn)中大家在使用過程中有沒有遇到其他的問題？
