摘要：而事件委托的概念事件目標(biāo)自身不處理事件，而是將其委托給父元素或祖先元素或根元素，而借助事件的冒泡性質(zhì)由內(nèi)向外來(lái)達(dá)到最終處理事件。而且一旦出現(xiàn)，局部刷新導(dǎo)致重新綁定事件。函數(shù)的用法，代表要移除的事件，表示選擇的，表示事件處理函數(shù)。

歡迎來(lái)我的專欄查看系列文章。

這次的內(nèi)容是來(lái)介紹關(guān)于 jQuery 的事件委托。不過(guò)在之前呢有必要先來(lái)了解一下 JS 中的事件委托與冒泡，我之前也寫(xiě)過(guò)類似的博客，事件冒泡與捕獲

事件是 JS DOM 中極具活力的內(nèi)容，你可以隨時(shí)監(jiān)聽(tīng) DOM 的變化，并對(duì)它們及時(shí)的做出反應(yīng)，如果你不是太懂 JS 中的事件，建議你先去看一些相關(guān)介紹的文章，直接看 jQuery 中的事件委托頭會(huì)頭大的。

事件的處理順序由兩個(gè)環(huán)節(jié)，一個(gè)是捕獲環(huán)節(jié)，一個(gè)是冒泡環(huán)節(jié)，借用別人的一張圖：

如果把處理也算進(jìn)的話，整個(gè)事件分為三個(gè)階段，分別是捕獲階段，目標(biāo)處理階段和冒泡階段。捕獲階段由外向內(nèi)尋找 target，冒泡階段由內(nèi)向外直到根結(jié)點(diǎn)。這只是一個(gè)事件，當(dāng)這三個(gè)階段中又穿插著更多的事件時(shí)，還需要將事件的執(zhí)行順序考慮進(jìn)去。

而 jQuery 事件委托的概念：事件目標(biāo)自身不處理事件，而是將其委托給父元素或祖先元素或根元素，而借助事件的冒泡性質(zhì)（由內(nèi)向外）來(lái)達(dá)到最終處理事件。

首先必須要知道，綁定事件越多，瀏覽器內(nèi)存占用越大，就會(huì)間接的影響性能。而且一旦出現(xiàn) ajax，局部刷新導(dǎo)致重新綁定事件。

使用事件委托可以解決以上帶來(lái)的問(wèn)題，借助事件的冒泡，尤其當(dāng)一個(gè)父元素的子元素過(guò)多，而且子元素綁定的事件非常多時(shí)，委托事件的作用就體現(xiàn)出來(lái)了。

我本人不善于比較 JS 中的性能問(wèn)題，感興趣的可以去看看這篇文章關(guān)于事件委托性能的設(shè)計(jì)和比較。深入理解-事件委托。

在早期的 jQuery 版本，使用的是 .delegate()、.bind()、.live()等方法來(lái)實(shí)現(xiàn)事件監(jiān)聽(tīng)，當(dāng)然也包括.click()方法，隨著 jQuery 的發(fā)展，像 live 方法已經(jīng)明確從 jQuery 中刪除，而其余的方法，比如 bind 方法也將在 3.0 之后的版本陸續(xù)刪除，取而代之的是 .on()方法。而且剩下的其它方法都是通過(guò) on 方法來(lái)間接實(shí)現(xiàn)的，如果介紹，只需要看 on 的源碼即可。

on 函數(shù)在 jQuery 中的用法也很簡(jiǎn)單，.on( events [, selector ] [, data ], handler(eventObject) )events 表示綁定的事件，比如 "click" 或 "click mouseleave"，selector 和 data 是可選的，分別表示要綁定事件的元素和要執(zhí)行的數(shù)據(jù)，handler 表示事件執(zhí)行函數(shù)。

off 函數(shù)的用法 .off( events [, selector ] [, handler ] )，events 代表要移除的事件，selector 表示選擇的 dom，handler 表示事件處理函數(shù)。還有更殘暴的比如 .off()不接受任何參數(shù)，表示著移除所有 on 綁定的函數(shù)。

雖然我分析的源碼時(shí) jQuery 3.1.1，但這個(gè)時(shí)候 bind 和 delegate 函數(shù)并沒(méi)有從源碼中移除呢，先來(lái)看看它們?cè)趺凑{(diào)用 on：

jQuery.fn.extend( {
  bind: function( types, data, fn ) {
    return this.on( types, null, data, fn );
  },
  unbind: function( types, fn ) {
    return this.off( types, null, fn );
  },
  delegate: function( selector, types, data, fn ) {
    return this.on( types, selector, data, fn );
  },
  undelegate: function( selector, types, fn ) {
    // ( namespace ) or ( selector, types [, fn] )
    return arguments.length === 1 ?
      this.off( selector, "**" ) :
      this.off( types, selector || "**", fn );
  }
} );

可以看得出來(lái)，全都被 on 和 off 這兩個(gè)函數(shù)來(lái)處理了。

jQuery.fn.extend( {
  on: function (types, selector, data, fn) {
    // on 又依托于全局的 on 函數(shù)
    return on(this, types, selector, data, fn);
  }
} );
function on( elem, types, selector, data, fn, one ) {
  var origFn, type;

  // 支持 object 的情況
  if ( typeof types === "object" ) {

    // ( types-Object, selector, data )
    if ( typeof selector !== "string" ) {

      // ( types-Object, data )
      data = data || selector;
      selector = undefined;
    }
    // 一次執(zhí)行 object 的每一個(gè)
    for ( type in types ) {
      on( elem, type, selector, data, types[ type ], one );
    }
    return elem;
  }
  // 參數(shù)為兩個(gè)的情況
  if ( data == null && fn == null ) {

    // ( types, fn )
    fn = selector;
    data = selector = undefined;
  } else if ( fn == null ) {
    if ( typeof selector === "string" ) {

      // ( types, selector, fn )
      fn = data;
      data = undefined;
    } else {

      // ( types, data, fn )
      fn = data;
      data = selector;
      selector = undefined;
    }
  }
  if ( fn === false ) {
    // returnFalse 是一個(gè)返回 false 的函數(shù)
    fn = returnFalse;
  } else if ( !fn ) {
    return elem;
  }

  if ( one === 1 ) {
    origFn = fn;
    fn = function( event ) {

      // Can use an empty set, since event contains the info
      jQuery().off( event );
      return origFn.apply( this, arguments );
    };

    // Use same guid so caller can remove using origFn
    fn.guid = origFn.guid || ( origFn.guid = jQuery.guid++ );
  }
  return elem.each( function() {
    // 關(guān)鍵
    jQuery.event.add( this, types, fn, data, selector );
  } );
}

是的，你沒(méi)有看錯(cuò)，這個(gè)全局的 on 函數(shù)，其實(shí)只是起到了校正參數(shù)的作用，而真正的大頭是：

jQuery.event = {
  global = {},
  add: function(){...},
  remove: function(){...},
  dispatch: function(){...},
  handlers: function(){...},
  addProp: function(){...},
  fix: function(){...},
  special: function(){...}
}

off 函數(shù)：

jQuery.fn.off = function (types, selector, fn) {
  var handleObj, type;
  if (types && types.preventDefault && types.handleObj) {
    // ( event )  dispatched jQuery.Event
    handleObj = types.handleObj;
    jQuery(types.delegateTarget).off(
      handleObj.namespace ? handleObj.origType + "." + handleObj.namespace : handleObj.origType,
      handleObj.selector,
      handleObj.handler
    );
    return this;
  }
  if (typeof types === "object") {
    // ( types-object [, selector] )
    for (type in types) {
      this.off(type, selector, types[type]);
    }
    return this;
  }
  if (selector === false || typeof selector === "function") {
    // ( types [, fn] )
    fn = selector;
    selector = undefined;
  }
  if (fn === false) {
    fn = returnFalse;
  }
  return this.each(function() {
    // 關(guān)鍵
    jQuery.event.remove(this, types, fn, selector);
  });
}

可見(jiàn) jQuery 對(duì)于參數(shù)的放縱導(dǎo)致其處理起來(lái)非常復(fù)雜，不過(guò)對(duì)于使用者來(lái)說(shuō)，卻非常大便利。

委托事件也帶來(lái)了一些不足，比如一些事件無(wú)法冒泡，load、submit 等，會(huì)加大管理等復(fù)雜，不好模擬用戶觸發(fā)事件等。

jQuery 2.0.3 源碼分析 事件綁定 - bind/live/delegate/on
深入理解-事件委托
.on()

本文在 github 上的源碼地址，歡迎來(lái) star。

歡迎來(lái)我的博客交流。