跨瀏覽器的事件處理程序

事件處理程序有DOM0級事件處理程序益咬、DOM2級事件處理程序漏健,IE事件處理程序,DOM0級事件處理程序具有簡單举农,跨瀏覽器的優(yōu)勢。DOM2級事件定義了兩個方法:addEventListener()和removeEventListener()這兩個方法用于指定和刪除事件處理程序敞嗡,IE也有兩個方法:attachEvent()和detachEvent(),由于IE8和更早的版本只支持事件冒泡颁糟,所以通過這兩個方法只能添加到冒泡階段,為了使事件處理程序可以在大多數(shù)瀏覽器正常的運行喉悴,只要關注冒泡階段即可棱貌。所以我們要寫一個方法,讓它根據(jù)情況使用DOM0級方法箕肃,DOM2級方法或者IE方法添加事件:

function addEvent(e,type,handler){
        if(e.addEventListener){
            e.addEventListener(type,handler,false);
        }else if(e.attachEvent){
            e.attachEvent("on"+type,handler);
        }else{
            e["on"+type]=handler;
        }
    }

可以這樣使用:
addEvent(btn,'’click',handler);

與addEvent()對應的移除事件的方法是removeEvent(),無論該事件用什么方法添加到元素中婚脱,如果其他方法無效,就采用DOM0級的方法移除勺像。

function removeEvent(e,type,handler){
           if(e.removeEventListener){
               e.removeEventListener(type,handler,false);
           }else if(e.detachEvent){
               e.detachEvent("on"+type,handler);
           }else {
               e["on"+type]=null;
           }
    }

這兩個方法首先都判斷是否存在DOM2級的方法障贸,如果存在就使用該方法傳入事件類型,事件處理程序吟宦,和第三個參數(shù)false(因為關注冒泡階段)篮洁,如果存在IE方法就用第二種,以此類推殃姓,但是以上兩種方法沒有考慮到IE瀏覽器作用域的問題袁波,其實這個我也不是很理解,參考老師的課件,添加的時候:

function addEvent(node, type, handler) {
    if (!node) return false;
    if (node.addEventListener) {
        node.addEventListener(type, handler, false);
        return true;
    }
    else if (node.attachEvent) {
        node['e' + type + handler] = handler;
        node[type + handler] = function() {
            node['e' + type + handler](window.event);
        };
        node.attachEvent('on' + type, node[type + handler]);
        return true;
    }
    return false;
}

移除事件時:

function removeEvent(node, type, handler) {
    if (!node) return false;
    if (node.removeEventListener) {
        node.removeEventListener(type, handler, false);
        return true;
    }
    else if (node.detachEvent) {
        node.detachEvent('on' + type, node[type + handler]);
        node[type + handler] = null;
    }
    return false;
}

不是很明白window.event辰狡。

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末锋叨,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子宛篇,更是在濱河造成了極大的恐慌娃磺,老刑警劉巖,帶你破解...
    沈念sama閱讀 210,978評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件叫倍,死亡現(xiàn)場離奇詭異偷卧,居然都是意外死亡豺瘤,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,954評論 2 384
  • 文/潘曉璐 我一進店門听诸,熙熙樓的掌柜王于貴愁眉苦臉地迎上來坐求,“玉大人,你說我怎么就攤上這事晌梨∏培停” “怎么了?”我有些...
    開封第一講書人閱讀 156,623評論 0 345
  • 文/不壞的土叔 我叫張陵仔蝌,是天一觀的道長泛领。 經(jīng)常有香客問我,道長敛惊,這世上最難降的妖魔是什么渊鞋? 我笑而不...
    開封第一講書人閱讀 56,324評論 1 282
  • 正文 為了忘掉前任,我火速辦了婚禮瞧挤,結果婚禮上锡宋,老公的妹妹穿的比我還像新娘。我一直安慰自己特恬,他們只是感情好执俩,可當我...
    茶點故事閱讀 65,390評論 5 384
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著癌刽,像睡著了一般奠滑。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上妒穴,一...
    開封第一講書人閱讀 49,741評論 1 289
  • 那天宋税,我揣著相機與錄音,去河邊找鬼讼油。 笑死杰赛,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的矮台。 我是一名探鬼主播乏屯,決...
    沈念sama閱讀 38,892評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼瘦赫!你這毒婦竟也來了辰晕?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,655評論 0 266
  • 序言:老撾萬榮一對情侶失蹤确虱,失蹤者是張志新(化名)和其女友劉穎含友,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,104評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡窘问,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,451評論 2 325
  • 正文 我和宋清朗相戀三年辆童,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片惠赫。...
    茶點故事閱讀 38,569評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡把鉴,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出儿咱,到底是詐尸還是另有隱情庭砍,我是刑警寧澤,帶...
    沈念sama閱讀 34,254評論 4 328
  • 正文 年R本政府宣布混埠,位于F島的核電站逗威,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏岔冀。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,834評論 3 312
  • 文/蒙蒙 一概耻、第九天 我趴在偏房一處隱蔽的房頂上張望使套。 院中可真熱鬧,春花似錦鞠柄、人聲如沸侦高。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,725評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽奉呛。三九已至,卻和暖如春夯尽,著一層夾襖步出監(jiān)牢的瞬間瞧壮,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,950評論 1 264
  • 我被黑心中介騙來泰國打工匙握, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留咆槽,地道東北人。 一個月前我還...
    沈念sama閱讀 46,260評論 2 360
  • 正文 我出身青樓圈纺,卻偏偏與公主長得像秦忿,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子蛾娶,可洞房花燭夜當晚...
    茶點故事閱讀 43,446評論 2 348

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

  • 摘自 js權威指南第三版 第一個要創(chuàng)建的方法是addHandler()灯谣,它的職責是視情況分別使用DOM0 級方法、...
    一沭丶閱讀 272評論 0 0
  • 一、問答 1. dom對象的innerText和innerHTML有什么區(qū)別? innerHTML: 也就是從對象...
    饑人谷_羅偉恩閱讀 591評論 0 2
  • JavaScript 程序采用了異步事件驅(qū)動編程模型呐萨。在這種程序設計風格下杀饵,當文檔、瀏覽器谬擦、元素或與之相關的對象發(fā)...
    劼哥stone閱讀 1,252評論 3 11
  • 本章內(nèi)容 理解事件流 使用事件處理程序 不同的事件類型 JavaScript 與 HTML 之間的交互是通過事件實...
    悶油瓶小張閱讀 280評論 0 0
  • 歡迎來到不可能的世界切距! 本期編輯:葉子露Lucya 1.編者的話 感謝大家關注奇思妙想!奇思的編輯們?nèi)匀辉诰ぞI(yè)業(yè)...
    葉子露Lucya閱讀 205評論 16 8