夜夜日狠狠干天天干,久草国产精品中的精品,狠狠撸色五月

重寫事件對象

jQuery 為 dom 處理而生，那么處理兼容的手段自然是獨樹一幟了，所以：

jQuery對事件的對象的兼容問題單獨抽象出一個 fix 類，用來重寫這個事件對象

jQuery 利用 jQuery.event.fix() 來解決跨瀏覽器的兼容性問題，統一接口。

除該核心方法外，我們要根據事件的類型，統一接口的獲取，所以 jQuery 引入了 (jQuery.event) props、 fixHooks、keyHooks、mouseHooks 等數據模塊。

props 存儲了原生事件對象 event 的通用屬性
keyHook.props 存儲鍵盤事件的特有屬性
mouseHooks.props 存儲鼠標事件的特有屬性。
keyHooks.filter 和 mouseHooks.filter 兩個方法分別用于修改鍵盤和鼠標事件的屬性兼容性問題，用于統一接口。
比如 event.which 通過 event.charCode 或 event.keyCode 或 event.button 來標準化。

最后 fixHooks 對象用于緩存不同事件所屬的事件類別，比如：

fixHooks['click'] === jQuery.event.mouseHooks;
fixHooks['keydown'] === jQuery.event.keyHooks;
fixHooks['focusin'] === {};

從源碼處獲取對事件對象的操作，通過調用 jQuery.Event 重寫事件對象，將瀏覽器原生 Event 的屬性賦值到新創建的 jQuery.Event 對象中去。

event = new jQuery.Event( originalEvent );

event 就是對原生事件對象的一個重寫了，為什么要這樣，jQuery要增加自己的處理機制唄，這樣更靈活，而且還可以傳遞 data 數據，也就是用戶自定義的數據。

構造出來的新對象：

看圖，通過 jQuery.Event 構造器，僅僅只有一些定義的屬性與方法，但是原生的事件對象的屬性是不是丟了？

所以還需要把原生的的屬性給混入到這個新對象上，那么此時帶來一個問題，不同事件會產生了不同的事件對象，擁有不同的屬性，所以還有一套適配的機制，根據不同的觸發點去適配需要混入的屬性名。

擴展通過 jQuery.Event 構造出的新事件對象屬性。

//擴展事件屬性
this.fixHooks[ type ] = fixHook =
    rmouseEvent.test( type ) ? this.mouseHooks :
        rkeyEvent.test( type ) ? this.keyHooks :
        {};

有一些屬性是共用的，都存在，所以單獨拿出來就好了。

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;

然后混入到這個新的對象上。

jQuery 自己寫了一個基于 native event 的 Event 對象，并且把 copy 數組中對應的屬性從 native event 中復制到自己的 Event 對象中。

while ( i-- ) {
    prop = copy[ i ];
    event[ prop ] = originalEvent[ prop ];
}

在最后 jQuery 還不忘放一個鉤子，調用 fixHook.fitler 方法用以糾正一些特定的 event 屬性。例如 mouse event 中的 pageX，pageY，keyboard event中的 which，進一步修正事件對象屬性的兼容問題。

fixHook.filter? fixHook.filter( event, originalEvent ) : event

fixHook 就是在上一章，預處理的時候用到的，分解 type 存進去的，針對這個特性的單獨處理，最后返回這個“全新的”Event 對象。

總的來說 jQuery.event.fix 做的事情：

1.將原生的事件對象 event 修正為一個新的可寫 event 對象，并對該 event 的屬性以及方法統一接口
2.該方法在內部調用了 jQuery.Event(event) 構造函數

任務

?不會了怎么辦

index.html

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src="http://www.xianlaiwan.cn/static/lib/jquery/1.9.1/jquery.js" type="text/javascript"></script> <title>重寫事件對象</title> </head> <body> <div id="aaron"> <div> <p>點擊重寫事件對象</p> </div> </div> <ul></ul> <script type="text/javascript"> function returnTrue() { return true; } function returnFalse() { return false; } //模擬出事件對象 //增加調用判斷方法 var Event = function(src, props) { if (src && src.type) { this.originalEvent = src; this.type = src.type; this.isDefaultPrevented = src.defaultPrevented || src.defaultPrevented === undefined && src.returnValue === false ? returnTrue : returnFalse; } else { this.type = src; } this.timeStamp = src && src.timeStamp || jQuery.now(); this[jQuery.expando] = true; }; Event.prototype = { isDefaultPrevented: returnFalse, isPropagationStopped: returnFalse, isImmediatePropagationStopped: returnFalse, preventDefault: function() { var e = this.originalEvent; this.isDefaultPrevented = returnTrue; if (e && e.preventDefault) { e.preventDefault(); } }, stopPropagation: function() { var e = this.originalEvent; this.isPropagationStopped = returnTrue; if (e && e.stopPropagation) { e.stopPropagation(); } }, stopImmediatePropagation: function() { var e = this.originalEvent; this.isImmediatePropagationStopped = returnTrue; if (e && e.stopImmediatePropagation) { e.stopImmediatePropagation(); } this.stopPropagation(); } }; function fix(event) { //原始事件引用 var originalEvent = event; //鼠標事件對象的屬性 var props = "altKey bubbles cancelable ctrlKey currentTarget eventPhase metaKey relatedTarget shiftKey target timeStamp view which button buttons clientX clientY offsetX offsetY pageX pageY screenX screenY toElement".split(" "); //創建事件對象 var event = new Event(originalEvent); //混入事件屬性 i = props.length; while (i--) { prop = props[i]; event[prop] = originalEvent[prop]; } return event } document.getElementById('aaron').addEventListener('click',function(e){ e = fix(e) for(var i in e){ show('屬性'+i+' 值：' +e[i]) } },false) function show(data) { $('ul').append('<li>' + data + '</li>') } </script> </body> </html>

提問題

提交

其他問答

查看更多本節問答

寫筆記

公開筆記

提交

全屏

請驗證，完成請求

由于請求次數過多，請先驗證，完成再次請求

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

5-10 重寫事件對象

重寫事件對象

任務

提問題

其他問答

寫筆記

您還未綁定服務號

收藏課程后，能更快找到我哦～

手記推薦

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

5-10 重寫事件對象

熱搜

最近搜索清空

重寫事件對象

任務

提問題

其他問答

寫筆記

您還未綁定服務號

收藏課程后，能更快找到我哦～

手記推薦

收藏課程后，能更快找到我哦～