淺談事件兼容性問題

1热押、兼容性

(1)語法(syntax): addEventListener(type, handler, useCapture)

type:事件類型

handler:事件處理函數(shù)

useCapture:是否在捕獲階段觸發(fā)

兼容支持:ie9 以上主流瀏覽器。

(2) 語法(syntax):attachEvent("on" + type, hander )

type:事件類型

handler:事件處理函數(shù)

兼容支持:ie6-10。

2笨腥、初級封裝

function ?registerEvent(ele,type,handler){

? ? ? ? if(ele.addEventListener){

? ? ? ? ? ? ? ele.addEventListener(type,handler,false);

? ? ? ? }else if(ele.attachEvent){

? ? ? ? ? ? ? ele.attachEvent("on"+type,handler);

? ? ? ? }else{

? ? ? ? ? ? ? ele["on"+type]=handler;

? ? ? ? }

}

缺點:同一個頁面里有多次注冊事件存筏,而每次調(diào)用都要判斷一次瀏覽器的支持環(huán)境园骆,浪費資源!

3司倚、中級封裝

function ?createRegister(){

? ? ? if(window.addEventListener){

? ? ? ? ? ? ?return function(ele,type,handler){

? ? ? ? ? ? ? ? ? ? ?ele.addEventListener(type,handler,false);

? ? ? ? ? ? ?}

? ? ? ?}else if(window.attachEvent){

? ? ? ? ? ? ?return function(ele,type,handler){

? ? ? ? ? ? ? ? ? ? ele.attachEvent("on"+type,handler);

? ? ? ? ? ? ?}

? ? ? ? }else{

? ? ? ? ? ? ? ?return function(ele,type,handler){

? ? ? ? ? ? ? ? ? ? ? ?ele["on"+type]=handler;

? ? ? ? ? ? ? ?}

? ? ? ?}

}

優(yōu)點:調(diào)用craeteRegister函數(shù),并不是在注冊事件篓像,而是獲取一個當前瀏覽器支持的注冊事件的方式? ??

?var? eventRegister? =? createRegister();

缺點:(1).事件對象的獲取动知,要處理;

? ? ? ? ? ?(2). this的指向問題员辩,也要處理盒粮。

3、高級封裝

function? createRegister(){

? ? ? ? ?if(window.addEventListener){

? ? ? ? ? ? ? ? ?return function(ele,type,handler){

? ? ? ? ? ? ? ? ? ? ? ?ele.addEventListener(type,handler,false);

? ? ? ? ? ? ? ? ?}

? ? ? ? ?}else if(window.attachEvent){

? ? ? ? ? ? ? ? return function(ele,type,handler){

? ? ? ? ? ? ? ? ? ? ? ? ele.attachEvent("on"+type,function(){

//使用一個中間函數(shù)奠滑,這樣子就可以自己控制調(diào)用了丹皱,call方法將this指向我們需要的ele.

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?handler.call(ele,window.event);

? ? ? ? ? ? ? ? ? ? ? ? });

? ? ? ? ? ? ? ? }

? ? ? ? ?}else{

? ? ? ? ? ? ? ? ?return function(ele,type,handler){

? ? ? ? ? ? ? ? ? ? ? ?ele["on"+type]=handler;

? ? ? ? ? ? ? ? ?}

? ? ? ? ? }

}

優(yōu)點:(1)、使用我們封裝好的eventRegister這個函數(shù)的時候养叛,不再需要考慮瀏覽器的兼容性問題种呐。

(2)、用一種統(tǒng)一的方式弃甥,就能夠獲取到事件對象爽室,以及當前點擊的元素對象。

總結(jié):第一次寫簡書,好不習慣啊阔墩,求教怎么在上面寫出開發(fā)者工具的代碼嘿架,寫的好了啊啸箫!奔潰耸彪!

謝謝,望大神指教忘苛!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末蝉娜,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子扎唾,更是在濱河造成了極大的恐慌召川,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,651評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件胸遇,死亡現(xiàn)場離奇詭異荧呐,居然都是意外死亡,警方通過查閱死者的電腦和手機纸镊,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,468評論 3 392
  • 文/潘曉璐 我一進店門倍阐,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人逗威,你說我怎么就攤上這事峰搪。” “怎么了庵楷?”我有些...
    開封第一講書人閱讀 162,931評論 0 353
  • 文/不壞的土叔 我叫張陵罢艾,是天一觀的道長。 經(jīng)常有香客問我尽纽,道長咐蚯,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,218評論 1 292
  • 正文 為了忘掉前任弄贿,我火速辦了婚禮春锋,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘差凹。我一直安慰自己期奔,他們只是感情好,可當我...
    茶點故事閱讀 67,234評論 6 388
  • 文/花漫 我一把揭開白布危尿。 她就那樣靜靜地躺著呐萌,像睡著了一般。 火紅的嫁衣襯著肌膚如雪谊娇。 梳的紋絲不亂的頭發(fā)上肺孤,一...
    開封第一講書人閱讀 51,198評論 1 299
  • 那天,我揣著相機與錄音,去河邊找鬼赠堵。 笑死小渊,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的茫叭。 我是一名探鬼主播酬屉,決...
    沈念sama閱讀 40,084評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼揍愁!你這毒婦竟也來了呐萨?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,926評論 0 274
  • 序言:老撾萬榮一對情侶失蹤吗垮,失蹤者是張志新(化名)和其女友劉穎垛吗,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體烁登,經(jīng)...
    沈念sama閱讀 45,341評論 1 311
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,563評論 2 333
  • 正文 我和宋清朗相戀三年蔚舀,在試婚紗的時候發(fā)現(xiàn)自己被綠了饵沧。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,731評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡赌躺,死狀恐怖狼牺,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情礼患,我是刑警寧澤是钥,帶...
    沈念sama閱讀 35,430評論 5 343
  • 正文 年R本政府宣布,位于F島的核電站缅叠,受9級特大地震影響悄泥,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜肤粱,卻給世界環(huán)境...
    茶點故事閱讀 41,036評論 3 326
  • 文/蒙蒙 一弹囚、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧领曼,春花似錦鸥鹉、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,676評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至单刁,卻和暖如春灸异,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,829評論 1 269
  • 我被黑心中介騙來泰國打工绎狭, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留细溅,地道東北人。 一個月前我還...
    沈念sama閱讀 47,743評論 2 368
  • 正文 我出身青樓儡嘶,卻偏偏與公主長得像喇聊,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子蹦狂,可洞房花燭夜當晚...
    茶點故事閱讀 44,629評論 2 354

推薦閱讀更多精彩內(nèi)容

  • 什么是事件: 我們可以簡單的把事件理解為瀏覽器的感知系統(tǒng)誓篱。比如說:他可以感覺到用戶是否點擊(click)了頁面、鼠...
    張松1366閱讀 6,790評論 1 6
  • 事件流 事件流描述的是從頁面中接收事件的順序凯楔。事件流包括三個階段:事件捕獲階段窜骄,處于目標階段,事件冒泡階段摆屯。 事件...
    練曉習閱讀 212評論 0 0
  • DOM DOM內(nèi)容主要分為四部分: 什么是DOM和節(jié)點邻遏; 獲取節(jié)點; 節(jié)點操作(3種)虐骑; 屬性操作(3種)准验。 什么...
    magic_pill閱讀 777評論 0 1
  • DOM0 事件和DOM2級在事件監(jiān)聽使用方式上有什么區(qū)別? DOM 0 級事件是基于元素內(nèi)聯(lián)屬性或DOM元素命名的...
    邢烽朔閱讀 335評論 0 0
  • 事件流: 事件流:頁面接收事件的順序廷没。 IE定義的:事件冒泡流(由最具體的元素依次傳播到DOM樹的最上層的Docu...
    xiaoguo16閱讀 587評論 0 0