jQuery中on方法使用注意事項詳解

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

采用事件委托機(jī)制綁定事件，好處是子元素動態(tài)加入時無需再次綁定。

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

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

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

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

delegate()的源碼是調(diào)用on()方法,只不過參數(shù)順序變了，所以統(tǒng)一用on()。

事件觸發(fā)順序：

target是觸發(fā)事件的元素，不會變;currentTarget是事件處理函數(shù)當(dāng)前所在的元素，會動態(tài)變化;delegateTarget是事件處理函數(shù)綁定的對象，不會變。

on方法利用了事件冒泡機(jī)制，事件會從事件源一直冒泡傳遞到document，并觸發(fā)相應(yīng)元素的事件處理函數(shù)（若有）。

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

on方法的冒泡過程中，具有事件處理函數(shù)的是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元素上沒有綁定事件處理函數(shù)，冒泡傳遞到P元素，P元素有直接綁定的事件處理函數(shù)，最先彈出P；然后傳遞到最外層div元素，div元素有事件委托，jQuery會從target (span)遍歷到delegateTarget (div)，查找childSelector節(jié)點，并壓入事件處理隊列中。最后壓入delegateTarget (div)元素直接綁定的事件處理函數(shù)。所以會彈出Span后彈出Div。

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持億速云！