on(eventType,[childSelector],[data],fn)

采用事件委托機制綁定事件，好處是子元素動態加入時無需再次綁定。

on方法可以傳入childSelector指定添加事件處理函數的具體子元素，還可以傳入對象格式的數據data，fn函數內部通過event.data.XXX獲取具體參數。傳入事件處理函數的data需要在事件綁定時就確定好，不同于trigger('eventType',[data])，tirgger方法中傳入的data（對象或數組形式）是事件發生時才計算的值。

如果同一個事件處理程序被多次綁定給同一個元素，觸發時就會執行多遍。所以綁定之前，需要先解綁之前的相同事件:

$(“selector”).off("click.xxx").on('click.xxx',function(){…});

如要在同一個元素上綁定不同事件處理函數，可以用事件的命名空間加以區分：click.forSpan、click.forDiv。

delegate()的源碼是調用on()方法,只不過參數順序變了，所以統一用on()。

事件觸發順序：

target是觸發事件的元素，不會變;currentTarget是事件處理函數當前所在的元素，會動態變化;delegateTarget是事件處理函數綁定的對象，不會變。

on方法利用了事件冒泡機制，事件會從事件源一直冒泡傳遞到document，并觸發相應元素的事件處理函數（若有）。

事件處理隊列：從觸發事件的元素開始，遍歷至delegateTarget，查找childSelector所指定的元素節點，并在事件處理隊列handlerQueue中壓入事件處理函數，最后將delegateTarget元素直接綁定的事件處理也壓入隊列（委托事件先于直接綁定的）。

on方法的冒泡過程中，具有事件處理函數的是delegateTarget元素而不是childSelector元素。

$("div").on('click','span',function(event){ 　　alert("The span element was clicked."); }); $("p").click(function(event){ 　　alert("The p element was clicked."); }); $("div").click(function(){ 　　alert("The div element was clicked."); });

點擊span元素時，span元素上沒有綁定事件處理函數，冒泡傳遞到P元素，P元素有直接綁定的事件處理函數，最先彈出P；然后傳遞到最外層div元素，div元素有事件委托，jQuery會從target (span)遍歷到delegateTarget (div)，查找childSelector節點，并壓入事件處理隊列中。最后壓入delegateTarget (div)元素直接綁定的事件處理函數。所以會彈出Span后彈出Div。

以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持武林網！