jQuery為我們提供了一個(gè)非常豐富好用的事件API，相對(duì)于瀏覽器自身的事件接口，jQuery有以下特點(diǎn)：

1. 對(duì)瀏覽器進(jìn)行了兼容性處理，用戶使用不需要考慮瀏覽器兼容性問題

2. 事件數(shù)據(jù)是保持在內(nèi)部緩存中的，而不是保持在DOM節(jié)點(diǎn)上

3. 事件委托機(jī)制，提供了一個(gè)非常簡單的事件委托使用方法

4. 自定義事件，不僅僅是瀏覽器事件，可以創(chuàng)建自定義事件

5. 輔助功能，比如命名空間，事件數(shù)據(jù)等等

那么下面就來看看jQuery是怎么實(shí)現(xiàn)的，首先掃一眼Event模塊的源碼結(jié)構(gòu)：

總共900行，總共包括5部分：

1. 正則和輔助函數(shù)：最上面的正則表達(dá)式和3個(gè)輔助函數(shù)，后面會(huì)說到

?

2. event輔助類：用于事件處理的輔助對(duì)象

?

3. Event可寫事件對(duì)象，等同于瀏覽器事件中的event對(duì)象，但Event對(duì)象的數(shù)據(jù)是可寫的，添加了jQuery的一些屬性。

?

4. 兼容性處理：事件的兼容性處理邏輯

?

5. 對(duì)外API，添加到j(luò)query實(shí)例對(duì)象的對(duì)外API

這段代碼結(jié)構(gòu)邏輯上分為4層，

第一層是對(duì)外API，這段是對(duì)用戶調(diào)用的參數(shù)處理

第二層是event輔助類，用戶調(diào)用以后會(huì)調(diào)用輔助類的各種方法

第三層是Event對(duì)象，event處理過程中會(huì)創(chuàng)建Event對(duì)象來代替瀏覽器事件中的event對(duì)象

第四層是兼容性處理，針對(duì)瀏覽器中有些事件的兼容性問題，進(jìn)行了處理?

?

1. 我們從對(duì)外API開始說起，比如：

<div id='div_main'><div id="div_sub"></div> </div><script>$("#div_main").on("click",function(){console.log(1);});
</script>

我們對(duì)$("#div_main")這個(gè)jquery對(duì)象調(diào)用了on方法，就可以注冊(cè)一個(gè)點(diǎn)擊事件，on方法是什么？見對(duì)外API那部分代碼

on: function(types, selector, data, fn, /*INTERNAL*/ one) {var origFn, type;// Types can be a map of types/handlersif (typeof types === "object") {// ( types-Object, selector, data )if (typeof selector !== "string") {// ( types-Object, data )data = data || selector;selector = undefined;}for (type in types) {this.on(type, selector, data, types[type], one);}return this;}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) {fn = returnFalse;} else if (!fn) {return this;}if (one === 1) {origFn = fn;fn = function(event) {// Can use an empty set, since event contains the infojQuery().off(event);return origFn.apply(this, arguments);};// Use same guid so caller can remove using origFnfn.guid = origFn.guid || (origFn.guid = jQuery.guid++);}return this.each(function() {jQuery.event.add(this, types, fn, data, selector);});}, on

?

?這段代碼其實(shí)是對(duì)用戶調(diào)用的方法進(jìn)行了各種參數(shù)情況邏輯判斷，最后歸根到j(luò)Query.event.add方法，也就是最后是調(diào)用了event輔助類的方法，首先on方法對(duì)用戶傳入的參數(shù)進(jìn)行了判斷，主要可能有以下幾種情況：

(1) 以json方式傳入多個(gè)事件方法，比如：

on({"click":fn1,"blur":fn2},"li",data);
on({"click":fn1,"blur":fn2},data);

　　　　　　　　//json對(duì)象格式
　　　　　　　　if (typeof types === "object") {
　　　　　　　　　//selector不是字符串是數(shù)據(jù),則重新設(shè)置數(shù)據(jù)變量,on({"click":fn1,"blur":fn2},data) if (typeof selector !== "string") { data = data || selector;selector = undefined;}
　　　　　　　　　//對(duì)每個(gè)json屬性遞歸調(diào)用on方法for (type in types) {this.on(type, selector, data, types[type], one);}return this;}

(2)其他三種情況：on("click",fn) on("click","li",fn) on("click",data,fn)

if (data == null && fn == null) {// 類似on("click",fn1),重置變量fn = selector;data = selector = undefined;} else if (fn == null) {if (typeof selector === "string") {//類似on("click","li",fn)?fn = data;data = undefined;} else {//類似on("click",data,fn);fn = data;data = selector;selector = undefined;}}
　　　　　　　//快捷方式，如果fn參數(shù)傳入false，自動(dòng)設(shè)置為false方法if (fn === false) {fn = returnFalse;} else if (!fn) {return this;} if (one === 1) {//只執(zhí)行一次的方法，執(zhí)行一次后刪除本事件對(duì)象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 origFnfn.guid = origFn.guid || (origFn.guid = jQuery.guid++);}return this.each(function() {//對(duì)每個(gè)jquery實(shí)例進(jìn)行調(diào)用jQuery.event.add(this, types, fn, data, selector);});

然后是one方法，其實(shí)就是調(diào)用上面的on方法，帶上one參數(shù)

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

off方法,和on方法類似，針對(duì)輸入?yún)?shù)的幾種情況最終是調(diào)用了event輔助類的remove方法。

off: function(types, selector, fn) {var handleObj, type;if (types && types.preventDefault && types.handleObj) {// ( event ) dispatched jQuery.EventhandleObj = 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() {jQuery.event.remove(this, types, fn, selector);});},

?

tigger方法，最終是調(diào)用event輔助類的tigger方法

trigger: function(type, data) {return this.each(function() {jQuery.event.trigger(type, data, this);});},

triggerHandler方法，調(diào)用event類的方法

triggerHandler: function(type, data) {var elem = this[0];if (elem) {return jQuery.event.trigger(type, data, elem, true);}}

tiggerHandler和tigger方法的區(qū)別是，triggerHandler只執(zhí)行jQuery對(duì)象數(shù)組中的第一個(gè)對(duì)象，并且不執(zhí)行冒泡，不執(zhí)行瀏覽器默認(rèn)事件。

?

轉(zhuǎn)載于:https://www.cnblogs.com/zhusheng2008/p/6108062.html

總結(jié)

以上是生活随笔為你收集整理的彻底弄懂jQuery事件原理一的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。