溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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。
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持億速云！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
