jquery event 封裝的源源分析

2022-09-15 16:39:17 字數 3124 閱讀 2382

對於j**ascript事件擴充套件,所有的lib都差不多。和jquery和prototype,yui和ext,其要解決的首要問題是相容性,所有lib都會對event進行包裹,統一其屬性解決其相容性。對於事件的操作無非是addevent,fireevent,removeevent這三個事件方法。一般lib都會對瀏覽器的提供的函式做一些擴充套件,解決相容性記憶體洩漏等問題。第三個問題就是如何得到domready的狀態。   

6.1 event的包裹   

瀏覽器的事件相容性是乙個令人頭疼的問題。ie的event在是在全域性的window下,而mozilla的event是事件源引數傳入到**函式中。還有很多的事件處理方式也一樣。   

jquery提供了乙個 event的包裹,這個相對於其它的lib提供的有點簡單,但是足夠使用。   

//對事件進行包裹。

fix : function(event) ;   

for(var i =this.props.length, prop;i;)           

event[expando] = 

true;         

//加上preventdefault and stoppropagation,在clone不會執行

event.preventdefault = function() ;   

event.stoppropagation = function() ;   

// 修正 timestamp

event.timestamp = event.timestamp || now();   

// 修正target

if(!event.target)                                       ③   

event.target = event.srcelement || document;               

if(event.target.nodetype == 3

)//文字節點是父節點。

event.target = event.target.parentnode;   

// relatedtarget

if(!event.relatedtarget && event.fromelement)      ④   

event.relatedtarget = event.fromelement == event.target   

? event.toelement   : event.fromelement;   

// calculate pagex/y if missing and clientx/y **ailable

if(event.pagex ==null&& event.clientx !=null)    

// add which for key events

if(!event.which    && ((event.charcode || event.charcode === 0

) ⑦   

? event.charcode    : event.keycode))   

event.which = event.charcode || event.keycode;   

// add metakey to non-mac browsers 

if(!event.metakey && event.ctrlkey)                        ⑧   

event.metakey = event.ctrlkey;   

// add which for click: 1 == left; 2 == middle; 3 == right

// note: button is not normalized, so don't use it

if(!event.which && event.button)                          ⑨   

event.which = (event.button & 

1 ? 1

: (event.button & 2

? 3 : (event.button & 4

? 2: 0

)));   

returnevent;   

},   

上面的**①處保留原始事件的引用,同時clone原始事件。在這個clone的事件上進行包裹。②處在原始事件上執行preventdefault 和 stoppropagation兩個方法達到是否阻止預設的事件動作發生和是否停止冒泡事件事件向上傳遞。   

③處是修正target個,ie中採用srcelement,同時對於文字節點事件,應該把target傳到其父節點。   

④處relatedtarget只是對於mouseout、mouseover有用。在ie中分成了to和from兩個target變數,在mozilla中沒有分開。為了保證相容,採用relatedtarget統一起來。   

⑥處是進行event的座標位置。這個是相對於page。如果頁面可以scroll,則要在其client上加上scroll。在ie中還應該減去預設的2px的body的邊框。   

⑦處是把鍵盤事件的按鍵統一到event.which的屬性上。ext中的實現ev.charcode || ev.keycode || 0

; ⑨則是把滑鼠事件的按鍵統一把event.which上。charcode、ev.keycode乙個是字元的按鍵,乙個不是字元的按鍵。⑨處採用&的方式來進行相容性的處理。 ext 通過下面三行解決相容問題。   

var btnmap = ext.isie ?  : (ext.issafari ?  : );this.button = e.button ? btnmap[e.button] : (e.which ? e.which-1

: -1

);   

①②③④⑤⑥⑦⑧⑨⑩  

jQuery Event物件的屬性和方法

原文 jquery的event物件用於表示當前文件元素觸發的dom事件,它對js原生的event物件進行了封裝,從而實現跨瀏覽器的相容。該物件主要用於獲取事件的相關資訊,或對該事件進行處理。注意 除了下列屬性和方法外,jquery的event物件還具備js原生event物件的屬性和方法。屬性初始版本...

jQuery event的複製貼上的坑

jquery為了相容性會把系統暴露出來的event重新整理一遍,但是複製貼上的event就被丟掉了。所以要在所有原生瀏覽器想實現複製貼上,大家都用flash實現了。其實只要用原生的方法捕獲事件就ok。簡單來個方法。var eventutil else if element.attachevent e...

從源字串擷取子串相關函式的封裝

一 從源字串中擷取左右兩個子串之間的字串。例如,源字串 123defabc456def789,擷取abc 左 與def 右 兩個子字串之間的字串 結果應該為456。函式的實現封裝如下 獲取左右兩個字串之間的字串 cstring getmidstrbylandr cstring strsrc,cstr...