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

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

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

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

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

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

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

事件觸發(fā)順序：

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

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

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

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.");
 });

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

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

最新評(píng)論