jQuery事件詳解

標籤：

jQuery中提供了四種事件監聽方式，分別是bind、live、delegate、on，對應的解除監聽的函數分別是unbind、die、undelegate、off。本文將分析一下他們的區別。

 

 bind(type,[data],function(eventObject))
type:事件類型，如click、change、mouseover等；

data:傳入監聽函數的參數，通過event.data取到。可選；

function:監聽函數，可傳入event對象，這裡的event是jQuery封裝的event對象，與原生的event對象有區別。

 

bind: function( types, data, fn ) {return this.on( types, null, data, fn );

 

bind為被選元素添加一個或多個事件處理常式，並規定事件發生時啟動並執行函數，可以看到內部是調用了on()方法。對應的有unbind(),移除被選元素的click事件處理常式。

unbind: function( types, fn ) {return this.off( types, null, fn );}

可以看到調用了off方法。

delegate(selector,type,[data],fn)

delegate: function( selector, types, data, fn ) {return this.on( types, selector, data, fn );}

對應的有undelegate

undelegate: function( selector, types, fn ) {    return arguments.length === 1 ?this.off( selector, "**" ) :this.off( types, selector || "**", fn );}

用來指定觸發事件的目標元素，監聽器將被綁定在調用此方法的元素上,這個方法多了一個selector，selector傳給了on(),這裡就可以使用事件委託了

 one(event,data,function)

該方法為被選元素附加一個或多個事件處理常式，並規定當事件發生時啟動並執行函數。
當使用 one() 方法時，每個元素只能運行一次事件處理器函數。

 on(type,[selector],[data],fn)

在on的內部調用了event.add方法，用來添加事件監聽

return this.each( function() {jQuery.event.add( this, types, fn, data, selector );})

對應的off()用來解除綁定

 自訂事件
在我看Bootstrap.js源碼的時候，看到以下這樣的代碼

var e = $.Event(‘show.bs.modal‘, { relatedTarget: _relatedTarget });this.$element.trigger(e)

jQuery.Event 建構函式 是暴露的並且可以調用trigger時使用。 new運算子是可選的。
當相應的事件發生時，任何通過.on()或一個快捷方法綁定的事件處理常式將被觸發。但是，它們可以用.trigger()方法手動觸發。調用 .trigger() 執行處理常式和使用者自然的觸發該事件，他們的執行順序時相同的。若要觸發通過 jQuery 綁定的事件處理函數，而不觸發原生的事件，使用.triggerHandler() 來代替，trigger和triggerHandler的區別在於，trigger方法觸發的事件會順著DOM樹向上冒泡，而triggerHandler方法只是調用該元素上對應的事件函數，不會冒泡。

$(‘#foo‘).on(‘custom‘, function(event, param1, param2) {alert(param1 + "\n" + param2);});$(‘#foo‘).trigger(‘custom‘, [‘Custom‘, ‘Event‘]);

 

事件對象始終是被傳遞到事件處理常式的第一個參數，但如果指定了額外的參數調用.trigger() 時，這些參數將被傳遞給處理常式。要傳遞多個參數，使用一個數組，如下所示。從jQuery 1.6.2開始，可以通過一個單一的參數，而不使用一個數組。
自訂事件可以使事件回呼函數和事件觸發分離，使我們的代碼更加整潔易讀。

jQuery事件詳解