jQuery 為 dom 處理而生,那么處理兼容的手段自然是獨(dú)樹一幟了,所以:
jQuery對(duì)事件的對(duì)象的兼容問題單獨(dú)抽象出一個(gè) fix 類,用來重寫這個(gè)事件對(duì)象
jQuery 利用 jQuery.event.fix()
來解決跨瀏覽器的兼容性問題,統(tǒng)一接口。
除該核心方法外,我們要根據(jù)事件的類型,統(tǒng)一接口的獲取,所以 jQuery 引入了 (jQuery.event) props、 fixHooks、keyHooks、mouseHooks 等數(shù)據(jù)模塊。
最后 fixHooks 對(duì)象用于緩存不同事件所屬的事件類別,比如:
fixHooks['click'] === jQuery.event.mouseHooks; fixHooks['keydown'] === jQuery.event.keyHooks; fixHooks['focusin'] === {};
從源碼處獲取對(duì)事件對(duì)象的操作,通過調(diào)用 jQuery.Event 重寫事件對(duì)象,將瀏覽器原生 Event 的屬性賦值到新創(chuàng)建的 jQuery.Event 對(duì)象中去。
event = new jQuery.Event( originalEvent );
event 就是對(duì)原生事件對(duì)象的一個(gè)重寫了,為什么要這樣,jQuery要增加自己的處理機(jī)制唄,這樣更靈活,而且還可以傳遞 data 數(shù)據(jù),也就是用戶自定義的數(shù)據(jù)。
構(gòu)造出來的新對(duì)象:
看圖,通過 jQuery.Event 構(gòu)造器,僅僅只有一些定義的屬性與方法,但是原生的事件對(duì)象的屬性是不是丟了?
所以還需要把原生的的屬性給混入到這個(gè)新對(duì)象上,那么此時(shí)帶來一個(gè)問題,不同事件會(huì)產(chǎn)生了不同的事件對(duì)象,擁有不同的屬性,所以還有一套適配的機(jī)制,根據(jù)不同的觸發(fā)點(diǎn)去適配需要混入的屬性名。
擴(kuò)展通過 jQuery.Event 構(gòu)造出的新事件對(duì)象屬性。
//擴(kuò)展事件屬性 this.fixHooks[ type ] = fixHook = rmouseEvent.test( type ) ? this.mouseHooks : rkeyEvent.test( type ) ? this.keyHooks : {};
有一些屬性是共用的,都存在,所以單獨(dú)拿出來就好了。
props: "altKey bubbles cancelable ctrlKey currentTarget eventPhase metaKey relatedTarget shiftKey target timeStamp view which".split(" "),
然后把私有的與公共的拼接一下。
copy = fixHook.props ? this.props.concat( fixHook.props ) : this.props;
然后混入到這個(gè)新的對(duì)象上。
jQuery 自己寫了一個(gè)基于 native event 的 Event 對(duì)象,并且把 copy 數(shù)組中對(duì)應(yīng)的屬性從 native event 中復(fù)制到自己的 Event 對(duì)象中。
while ( i-- ) { prop = copy[ i ]; event[ prop ] = originalEvent[ prop ]; }
在最后 jQuery 還不忘放一個(gè)鉤子,調(diào)用 fixHook.fitler 方法用以糾正一些特定的 event 屬性。例如 mouse event 中的 pageX,pageY,keyboard event中的 which,進(jìn)一步修正事件對(duì)象屬性的兼容問題。
fixHook.filter? fixHook.filter( event, originalEvent ) : event
fixHook 就是在上一章,預(yù)處理的時(shí)候用到的,分解 type 存進(jìn)去的,針對(duì)這個(gè)特性的單獨(dú)處理,最后返回這個(gè)“全新的”Event 對(duì)象。
總的來說 jQuery.event.fix 做的事情:
1.將原生的事件對(duì)象 event 修正為一個(gè)新的可寫 event 對(duì)象,并對(duì)該 event 的屬性以及方法統(tǒng)一接口 2.該方法在內(nèi)部調(diào)用了 jQuery.Event(event) 構(gòu)造函數(shù)
請(qǐng)驗(yàn)證,完成請(qǐng)求
由于請(qǐng)求次數(shù)過多,請(qǐng)先驗(yàn)證,完成再次請(qǐng)求
打開微信掃碼自動(dòng)綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報(bào)