jQuery的事件模塊是較復雜的，前面僅僅提到了對事件對象的包裝。即統一了一些兼容性的問題。這篇會綜述下jQuery的整個事件模塊。后面會詳細分析jQuery.event.add/jQuery.event.remove/jQuery.event.trigger。

雖然事件模塊代碼很難讀，但其提供的API接口還是很清晰的。如下

1 添加事件(bind/one/live/delegate/hover/toggle)

bind 基本的添加事件函數。

one 添加只執行一次的事件函數。

live 事件代理（使用document代理）。

delegate 事件代理（使用指定元素代理）。

hover 模擬css的hover。

toggle 顯示/隱藏。

bind/one/live 都是使用內部的jQuery.event.add 來完成事件添加。

delegate 內部調用的是live。

hover 內部使用mouseenter/mouseleave，而mouseenter/mouseleave又使用bind。

toggle 內部使用click，而click內部又調用的是bind。

實際上jQuery的一個each調用就給jQuery對象上增加了24個添加事件的快捷方法

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

jQuery.each( ("blur focus focusin focusout load resize scroll unload click dblclick " + ????"mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " + ????"change select submit keydown keypress keyup error").split(" "), function( i, name ) { ?? ????// Handle event binding ????jQuery.fn[ name ] = function( data, fn ) { ????????if ( fn == null ) { ????????????fn = data; ????????????data = null; ????????} ?? ????????return arguments.length > 0 ? ????????????this.bind( name, data, fn ) : ????????????this.trigger( name ); ????}; ?? ????if ( jQuery.attrFn ) { ????????jQuery.attrFn[ name ] = true; ????} });

如下圖

記住，bind調用的是jQuery.event.add，因此 jQuery.event.add 才是整個jQuery添加事件模塊的核心。以上所有的方法都是在其之上構建的上層應用。如圖

2 刪除事件 (unbind/die/undelegate)

unbind 刪除事件基礎方法。可以刪除一個指定handler，還可以刪除某類型事件的全部handler，甚至可以刪除掛在element上的全部事件。其內部調用jQuery.event.remove。

die/undelegate 刪除事件代理。 內部都使用unbind。

因此， jQuery.event.remove 才是整個jQuery刪除事件模塊的核心。unbind/die/undelegate都是在其之上構建的上層應用。如圖

3 觸發事件(trigger/triggerHandler)

trigger 觸發一個事件（會冒泡）

triggerHandler 觸發一個事件（不會冒泡）

trigger/triggerHandler 內部調用的都是jQuery.event.trigger，因此jQuery.event.trigger 才是整個jQuery觸發事件模塊的核心。如圖

原文路徑：http://www.cnblogs.com/snandy/archive/2011/06/27/2085062.html

轉載于:https://www.cnblogs.com/colorstory/archive/2013/04/11/2617809.html

總結

以上是生活随笔為你收集整理的jQuery源码分析系列：事件模块概述的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。