jQuery對事件體系的修正不止是做了屬性兼容，重寫了事件的方法，還增加狀態(tài)機(jī)，那么這樣的處理有什么作用？

事件的核心的處理來了，實(shí)現(xiàn)委托

var aaron = $("#aaron")
//同一個(gè)元素上綁定不同的事件委托
aaron.on('mousedown','p',function(e){
    alert('委托到p觸發(fā)')
  e.stopPropagation()
})
aaron.on('mousedown','ul',function(e){
    alert('被阻止了')
})

我們分析這個(gè)結(jié)構(gòu)：

1. 同一個(gè)元素上綁定同一個(gè)事件，實(shí)現(xiàn)不同的委托
2. 事件綁定在同一個(gè) id 為 aaron 的元素上
3. 同元素同事件分別綁定，但是同時(shí)又都支持冒泡
4. 同元素上的多個(gè)委托可以通過 stopPropagation 控制

委托設(shè)計(jì)的問題

1. 如何把回調(diào)句柄定位到當(dāng)前的委托元素上面，如果有多個(gè)元素上綁定事件回調(diào)要如何處理？
2. 這種結(jié)構(gòu)就涉及了一個(gè)事件的先后順序問題與事件的執(zhí)行問題，如果回調(diào)中設(shè)置了stopPropagation 那么冒泡的當(dāng)然會(huì)要被打斷了。

在通過 jQuery.event.add 方法的時(shí)候我們就知道，數(shù)據(jù)是被存儲(chǔ)在數(shù)據(jù)緩存 elemData 中，這樣我們不需要針對同一個(gè)元素上的每個(gè)事件都綁定 addEventListener，只需要把數(shù)據(jù)給分割好放到緩存中，所以同一個(gè)元素，不同事件，不重復(fù)綁定。  

events = elemData.events = {};
eventHandle = elemData.handle = function(e) {};

數(shù)據(jù)都儲(chǔ)存在 elemData 的緩存里面，除此之外還有一個(gè)關(guān)鍵的處理如果 on 中傳入?yún)?shù) selector ，意味著就是有委托的處理，那么我們就需要用一個(gè)標(biāo)記來記錄下這個(gè)元素到底委托了多少次。

handlers.delegateCount++

可以看出就會(huì)自增，用來標(biāo)記這個(gè)元素上有多少個(gè)委托的處理，用于后面的處理。

要實(shí)現(xiàn)委托，根據(jù)冒泡的原理，我們是不是應(yīng)該把每一個(gè)節(jié)點(diǎn)層次的事件給規(guī)劃出來，每個(gè)層次的依賴關(guān)系？

所以 jQuery 引入了 jQuery.event.handlers 用來區(qū)分普通事件與委托事件，形成一個(gè)有隊(duì)列關(guān)系的組裝事件處理包{elem, handlerObjs}的隊(duì)列。
在最開始引入 add 方法中增加 delegateCount 用來記錄是否委托數(shù)，通過傳入的 selector 判斷，此刻就能派上用場了。
先判斷下是否要處理委托，找到委托的句柄。根據(jù)之前的測試 demo,在元素 DIV 下面嵌套了 P，然后 P 內(nèi)嵌套了 A。

我們在觸發(fā)事件的時(shí)候，就會(huì)在事件緩存中取出這個(gè)元素所有對應(yīng)的事件數(shù)據(jù)，然后就會(huì)分析這個(gè)數(shù)據(jù)的結(jié)構(gòu)，是否有多個(gè)監(jiān)聽，是否有委托關(guān)系

從圖我們可以得出：

1. 元素本身有事件
2. 元素又要處理委托事件

那么事件的執(zhí)行就需要有個(gè)先后，jQuery要如何排序呢？

依賴委托節(jié)點(diǎn)在 DOM 樹的深度安排優(yōu)先級，委托的 DOM 節(jié)點(diǎn)層次越深，其執(zhí)行優(yōu)先級越高，委托的事件處理程序相對于直接綁定的事件處理程序在隊(duì)列的更前面，委托層次越深，該事件處理程序則越靠前。