科技

基礎面試27:jQuery中的bind(),live(),delegate(),on()的區別?

bind()方法

bind()方法用於對匹配的元素進行特定事件的繫結。它直接繫結在現有的元素節點上,也很好的解決了瀏覽器在事件處理中的相容問題。例如,它的呼叫格式如下:

bind(type, [data], fn) // 事件型別(必選),傳遞的引數(可選),相關的函式 $('a').bind('click',function(){alert('that tickles!')})

JQuery掃描文件找出所有的$('a')元素,並把alert函式繫結到每個元素的click事件上。

live()方法

live()是事件委託的概念來執行,把節點的處理委託給了document,向當前或未來的匹配元素新增一個或多個事件處理器。

live(type, [data], fn) // 事件型別(必選),傳遞的引數(可選),相關的函式

$('a').live('click',function(){alert('That tickles!')})

它是將函式繫結到$(document)元素上,並使用'click'和'a'作為引數。只要有事件冒泡到document節點上,它就檢視該事件是否是一個click事件,以及該事件的目標元素與'a'這一CSS選擇器是否匹配,如果都是的話,則執行函式。

delegate()方法

delegate()方法的行為有點類似live()。但不是把選擇器和事件的資訊附加到了document上,而是可以自行選擇它要附加的DOM元素,這個技術可以讓事件的委託正常工作。我們的選擇又多了一些靈活性,不單可以利用事件委託,還可以選擇委託的物件。它適用於當前或未來的元素(比如由指令碼建立的新元素)。

delegate(selector,[type],[data],fn) //元素節點(字串形式,一般是子級元素childselector),事件型別,傳遞的引數(可選),相關的函式$('#container').delegate('a','click',function(){ alert("That tickles!") });

jQuery掃描文件查詢$('#container'),並使用click事件和'a'這一CSS選擇器作為引數把alert函式繫結到$(‘#container’)上。任何時候只要有事件冒泡到$(‘#container’)上,它就檢視該事件是否是click事件,以及該事件的目標元素是否與CCS選擇器相匹配。如果兩種檢查的結果都為真的話,它就執行函式。

on()方法

on()方法繫結事件處理程式到當前選定的jQuery物件中的元素。它是在1.7版本中被提出來的,提供繫結事件處理程式所需的所有功能。用於替換 bind()、delegate()和 live()

on(events,[selector],[data],fn) // 事件型別,元素節點(可選),傳遞的引數(可選),相關的函式

jQuery逐漸被時代淘汰了,更多關注MVVM吧!

歡迎關注

Reference:科技日報

看更多!請加入我們的粉絲團

轉載請附文章網址

不可錯過的話題