簡(jiǎn)練說，就是：
先處理子元素委托給自身的事件，再處理自身的事件。

源碼：
$().on()—>jQuery.event.add()

jQuery.event = {
    //源碼5241行
    //this, types, fn, data, selector

    //#A,"click",function(){console.log("A被點(diǎn)擊了")},undefined,undefined
    //#A,"click",function(){點(diǎn)擊了C，即C委托A的click事件被點(diǎn)擊了},undefined,#C
    add: function( elem, types, handler, data, selector ) {
      xxx
      ...
      //優(yōu)先添加委托handler，再添加其他handler
      // Add to the element"s handler list, delegates in front
      //delegateCount即委托在#A上的事件數(shù)量
      if ( selector ) {
        //在下標(biāo)為handlers.delegateCount++的位置插入委托事件
        handlers.splice( handlers.delegateCount++, 0, handleObj );
      } else {
        handlers.push( handleObj );
      }
}

解析：
可以看到，jQuery 是優(yōu)先添加委托 click 事件，再添加自身 click 事件，觸發(fā)事件的時(shí)候也是按這個(gè)順序。

注意：
如下的例子，點(diǎn)擊 E 是不能觸發(fā) click 事件的，因?yàn)槊芭菝安坏?A 上：

  這是A


這是E

  $("#A").on("click" ,"#E",function (event) {
    console.log(event,"點(diǎn)擊了E，即E委托A的click事件被點(diǎn)擊了")
  })

三、jQuery 綁定事件上的 event 上的 target、currenttarget 和 delegateTarget 的區(qū)別？

target 是觸發(fā)事件的對(duì)象
delegateTarget 是事件委托的原對(duì)象

而currenttarget分三種情況：
（1）A 在自身有綁定 click 事件的條件下，C 再去委托 A 綁定 click 事件

  這是A

  

    這是B

    

    這是C
    

    

    這是D
    

  


  $("#A").on("click" ,function (event) {
    console.log(event,"A被點(diǎn)擊了")
  })

  $("#A").on("click" ,"#C",function (event) {
    console.log(event,"點(diǎn)擊了C，即C委托A的click事件被點(diǎn)擊了")
  })
  
  $("#C").on("click",function (event) {
    console.log(event,"C被點(diǎn)擊了")
  })

① 點(diǎn)擊了C，即 C 委托 A 的 click 事件被點(diǎn)擊了
event 的結(jié)構(gòu)如下：

可以看到，
target 是 #C，currenttarget 是 #A，delegateTarget 是 #A

也就是說：
target 是觸發(fā) click 事件的對(duì)象 #C，currenttarget 是 #C 委托綁定click事件的 #A，并且 #A 自身有綁定 click 事件

② A被點(diǎn)擊了
target 是 #A，currenttarget 是 #A，delegateTarget 是 #A

③ C被點(diǎn)擊了
target 是 #C，currenttarget 是 #C，delegateTarget 是 #C

（2）A 自身沒有綁定 click 事件，C 委托 A 綁定 click 事件

  這是A

  

    這是B

    

    這是C
    

    

    這是D
    

  


  $("#A").on("click" ,"#C",function (event) {
    console.log(event,"點(diǎn)擊了C，即C委托A的click事件被點(diǎn)擊了")
  })
  
  $("#C").on("click",function (event) {
    console.log(event,"C被點(diǎn)擊了")
  })

① 點(diǎn)擊了 C，即 C 委托 A 的 click 事件被點(diǎn)擊了
event 的結(jié)構(gòu)如下：

可以看到，
target 是 #C，currenttarget 是 #C，而不是 #A，delegateTarget 是 #A

也就是說：
target 是觸發(fā) click 事件的對(duì)象 #C，currenttarget 是 #C，因?yàn)?#C 委托 #A 綁定 click 事件，并且 #A 自身沒有綁定 click 事件

② C被點(diǎn)擊了
target是 #C，currenttarget 是 #C，delegateTarget 是 #C

（3）A在自身有綁定click事件的條件下，C再去委托A綁定click事件的同時(shí)，阻止冒泡！

  這是A

  

    這是B

    

    這是C
    

    

    這是D
    

  


  $("#A").on("click" ,"#C",function (event) {
    event.stopPropagation()
    console.log(event,"點(diǎn)擊了C，即C委托A的click事件被點(diǎn)擊了")
  })

  $("#C").on("click",function (event) {
    console.log(event,"C被點(diǎn)擊了")
  })

① 點(diǎn)擊了C，即C委托A的click事件被點(diǎn)擊了
event 的結(jié)構(gòu)如下：

可以看到，
target 是 #C，currenttarget 是 #C，而不是 #A，delegateTarget 是 #A

② C 被點(diǎn)擊了
target 是 #C，currenttarget 是 #C，delegateTarget 是 #C

為什么是這樣？
我們來(lái)分析下jQuery源碼：
$().on()—>jQuery.event.add()—>elem.addEventListener( type, eventHandle )，eventHandle—>jQuery.event.dispatch
currenttarget在jQuery.event.dispatch中定義，所以我們看jQuery.event.dispatch部分源碼：

jQuery.event = {
  //源碼5472行
  //nativeEvent即原生MouseEvent
  dispatch: function( nativeEvent ) {
    //獲取handler隊(duì)列
    handlerQueue = jQuery.event.handlers.call( this, event, handlers );

    //如果沒有阻止冒泡的話，那么
    while ( ( matched = handlerQueue[ i++ ] ) && !event.isPropagationStopped() ) {
        event.currentTarget = matched.elem;
    }
  }
  
    //源碼5547行
    //組裝事件處理隊(duì)列  
    //event是fix過的MouseEvent, handlers  
    handlers: function( event, handlers ) {
      //目標(biāo)元素
      var cur = event.target;
      for ( ; cur !== this; cur = cur.parentNode || this ) {
         if ( cur.nodeType === 1 && !( event.type === "click" && cur.disabled === true ) ) {
            matchedHandlers = [];
            matchedSelectors = {};
            for ( i = 0; i < delegateCount; i++ ) {
              handleObj = handlers[ i ];
              //sel就是#C
              // Don"t conflict with Object.prototype properties (#13203)
              sel = handleObj.selector + " ";

              if ( matchedSelectors[ sel ] === undefined ) {
                matchedSelectors[ sel ] = handleObj.needsContext ?
                  jQuery( sel, this ).index( cur ) > -1 :
                  //注意：jQuery.find()和jQuery().find()是不一樣的
                  jQuery.find( sel, this, null, [ cur ] ).length;
              }

              if ( matchedSelectors[ sel ] ) {
                matchedHandlers.push( handleObj );
              }
            }
          }

            if ( matchedHandlers.length ) {
                handlerQueue.push( { elem: cur, handlers: matchedHandlers } );
           }
      }

     // Add the remaining (directly-bound) handlers
     //#A 
     cur = this;
     //1<2 true
    //1<1 false
     //將除委托事件的事件（如自身綁定的事件）放入handlerQueue中
     if ( delegateCount < handlers.length ) {
        handlerQueue.push( { elem: cur, handlers: handlers.slice( delegateCount ) } );
      }
  }

}

解析：
event.currentTarget—>handlerQueue[ i++ ]—>jQuery.event.handlers

jQuery.event.handlers：
for循環(huán)的意思是：
（1）只要cur不等于this，即#A，就一直循環(huán)
每次循環(huán)：
（2）將matchedHandlers置為[ ]
（3）循環(huán)委托綁定的事件數(shù)量
循環(huán)委托綁定：
（4）matchedHandlers根據(jù)handleObj.selector是否有值，pushhandleObj

按照我們的例子來(lái)看，當(dāng) cur=event.target，cur=#C，然后進(jìn)入冒泡循環(huán)，再進(jìn)入委托事件循環(huán)，
關(guān)鍵是：jQuery.find()，
cur=#C 的時(shí)候，matchedSelectors[ sel ]=jQuery.find( sel, this, null, [ cur ] ).length=1
但是 cur=#B 的時(shí)候（冒泡循環(huán)），matchedSelectors[ sel ]=0，也就是說jQuery.find()不同于$().find，它是冒泡找 cur 元素！

所以 matchedHandlers 只 pushlength!==0的委托事件，所以 cur 就是 #C 了（新循環(huán)中的當(dāng)前值）。

然后

cur = this;

cur 又等于 this，即 #A，最后將除委托事件的事件（如自身綁定的事件）放入 handlerQueue 中，cur=#A

再拿例子舉，即（2）A 自身沒有綁定 click 事件，C 委托 A 綁定 click 事件
只有一個(gè) handler，并且是委托 handler，

handlerQueue[
  {
    elem:#C,
    ...
  },
]
//#C
event.currentTarget = handlerQueue[0].elem

（1）A 在自身有綁定 click 事件的條件下，C 再去委托 A 綁定 click 事件
有兩個(gè) handler

handlerQueue[
  {
    elem:#C,
    ...
  },
  {
    elem:#A,
    ...
  },
]
//#C
event.currentTarget = handlerQueue[0].elem
//#A
event.currentTarget = handlerQueue[1].elem

因?yàn)?b>#A只有一個(gè)event，所以在循環(huán)handlerQueue[i]時(shí)，event.currenttarget最終被#A所覆蓋

 while ( ( matched = handlerQueue[ i++ ] ) && !event.isPropagationStopped() ) {
        //最終被#A所覆蓋
        event.currentTarget = matched.elem;
    }

（3）A在自身有綁定click事件的條件下，C再去委托A綁定click事件的同時(shí)，阻止冒泡！
因?yàn)?b>!event.isPropagationStopped()，所以event.currentTarget=#C，未被#A覆蓋。

（完）