提到j(luò)Query的事件，不得不提一下 Dean Edwards大神 addEvent 庫(kù)，很多流行的類庫(kù)的基本思想從他那兒借來(lái)的。jQuery的事件處理機(jī)制吸取了 JavaScript 專家 Dean Edwards 編寫(xiě)的事件處理函數(shù)的精華，使得jQuery處理事件綁定的時(shí)候相當(dāng)?shù)目煽?。在預(yù)留退路(graceful degradation)，循序漸進(jìn)以及非入侵式編程思想方面，jQuery 也做的非常不錯(cuò)?？偟膩?lái)說(shuō)對(duì)于 jQuery 的事件綁定做了 2 大塊的處理：
在綁定的時(shí)候做了包裝處理
在執(zhí)行的時(shí)候有過(guò)濾器處理
看看 API 的參數(shù)：
.on( events [, selector ] [, data ], handler(eventObject) )
用來(lái)綁定一個(gè)事件：
var body = $('body')
body.on('click','p',function(){
console.log(this)
})
用 on 方法給 body 上綁定一個(gè) click 事件，冒泡到 p 元素的時(shí)候才出發(fā)回調(diào)函數(shù)，這里大家需要明確一點(diǎn)：
每次在body上點(diǎn)擊其實(shí)都會(huì)觸發(fā)事件，但是只目標(biāo)為p元素的情況下才會(huì)觸發(fā)回調(diào)的處理函數(shù)。通過(guò)源碼不難發(fā)現(xiàn)on方法實(shí)質(zhì)只完成一些參數(shù)調(diào)整的工作，而實(shí)際負(fù)責(zé)事件綁定的是其內(nèi)部 jQuery.event.add方法
看看綁定的實(shí)際接口on的代碼：
on: function(types, selector, data, fn, /*INTERNAL*/ one) {
//省略部分代碼
return this.each(function() {
jQuery.event.add(this, types, fn, data, selector);
});
｝
jQuery.event.add內(nèi)部實(shí)際上最終還是通過(guò)addEventListener綁定的事件
（單擊圖片可放大）
其中一些變量代碼的意思：
現(xiàn)在我們把之前的案例給套一下看看：
var body = document.getElementsByTagName('body')
var eventHandle = function() {
console.log(this)
}
body.addEventListener('click', eventHandle, false);
如果是我們自己實(shí)現(xiàn)的這個(gè)代碼是有問(wèn)題的，我們?cè)赽ody上每次都觸發(fā)了click事件，但是我們并沒(méi)有委托的p元素的處理，自然也達(dá)不到委托的效果。
eventHandle源碼
回到內(nèi)部綁定的事件句柄 eventHandle ，可想而知 eventHandle 不僅僅只是只是充當(dāng)一個(gè)回調(diào)函數(shù)的角色，而是一個(gè)實(shí)現(xiàn)了 EventListener 接口的對(duì)象。
if (!(eventHandle = elemData.handle)) {
eventHandle = elemData.handle = function(e) {
return typeof jQuery !== strundefined && jQuery.event.triggered !== e.type ?
jQuery.event.dispatch.apply(elem, arguments) : undefined;
};
}
可見(jiàn)在 eventHandle 中并沒(méi)有直接處理回調(diào)函數(shù)，而是映射到 jQuery.event.dispatch 分派事件處理函數(shù)了僅僅只是傳入 eventHandle.elem，arguments , 就是 body 元素 與事件對(duì)象那么這里有個(gè)問(wèn)題，事件回調(diào)的句柄并沒(méi)有傳遞過(guò)去，后面的代碼如何關(guān)聯(lián)？本章的一些地方可能要結(jié)合后面的 dispatch 處理才能清理，但是我們還是先看看做了那些處理。
一個(gè)簡(jiǎn)單的流程圖：
請(qǐng)驗(yàn)證，完成請(qǐng)求
由于請(qǐng)求次數(shù)過(guò)多，請(qǐng)先驗(yàn)證，完成再次請(qǐng)求
打開(kāi)微信掃碼自動(dòng)綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書(shū)簽
舉報(bào)