jQuery事件處理機(jī)制能幫我們處理那些問(wèn)題？

毋容置疑首先要解決瀏覽器事件兼容問(wèn)題：

1. 可以在一個(gè)事件類(lèi)型上添加多個(gè)事件處理函數(shù)，可以一次添加多個(gè)事件類(lèi)型的事件處理函數(shù)
2. 提供了常用事件的便捷方法
3. 支持自定義事件
4. 擴(kuò)展了組合事件
5. 提供了統(tǒng)一的事件封裝、綁定、執(zhí)行、銷(xiāo)毀機(jī)制

……

為了更深入的理解幕后的實(shí)現(xiàn)，所以先整理整體的結(jié)構(gòu)思路，從1.7后就去除了 live 綁定,所以現(xiàn)在的整個(gè)事件的 API

如圖：

jQuery的事件綁定有多個(gè)方法可以調(diào)用，以 click 事件來(lái)舉例：

$('#foo').click(function(){ })
$('#foo').bind('click',function(){ })
$("foo").delegate("td", "click", function() { })
$("foo").on("click", "td", function() { })

click,bind,delegate,on方法,以上四種綁定都能達(dá)到同一樣的效果，但是各自又有什么區(qū)別，內(nèi)部又是如何實(shí)現(xiàn)?

源碼分析：

click方式

jQuery.fn[ 'click' ] = function( data, fn ) {
    return arguments.length > 0 ?
         this.on( name, null, data, fn ) :
         this.trigger( name );
};

源碼很簡(jiǎn)單，合并15種事件統(tǒng)一增加到j(luò)Query.fn上，內(nèi)部調(diào)用this.on / this.trigger。

bind方式

bind: function( types, data, fn ) {
    return this.on( types, null, data, fn )
}

同樣調(diào)用的this.on/this.off。

delegate方式

delegate: function( selector, types, data, fn ) {
    return this.on( types, selector, data, fn )
}

同樣調(diào)用的this.on/this.off。

one方式

one: function( types, selector, data, fn ) {
    return this.on( types, selector, data, fn, 1 )
}

可見(jiàn)以上的接口只是修改了不同的傳遞參數(shù)，最后都交給 on 實(shí)現(xiàn)的。