DOM2級事件處理程序眠屎,事件監(jiān)聽

“DOM2級事件”定義了兩個方法翎嫡,用于處理指定和刪除事件處理程序的操作: addEventListener() 和 removeEventListener()。所有DOM節(jié)點中都包含這兩種方法贸营,并且他們都接受3個參數(shù):要處理的事件名,作為事件處理程序的函數(shù)和一個布爾值岩睁。最后這個布爾值參數(shù)如果是true钞脂,表示在捕獲階段調(diào)用事件處理程序;如果是false捕儒,表示在冒泡階段調(diào)用事件處理程序冰啃。
要在按鈕上為click時間添加事件處理程序,可以使用下列代碼:

var btn = document.getElementById("myBtn");
btn.addEventListener("click",function(){
      alert(this.id);
},false);

上面的代碼為一個按鈕添加onclick 時間長護理程序刘莹,而且該事件會在冒泡階段被觸發(fā)阎毅。(因為最后一個參數(shù)是false)。與DOM0級方法一樣点弯,這里添加的事件處理程序也是與其依附的元素的作用于中運行扇调。使用DOM2級方法處理事件處理程序的主要好處是可以添加多個事件處理程序。

var btn = document.getElementById("myBtn");
btn.addEventListener("click".function(){
      alert(this.id);
},false);
btn.addEventListener("click",function(){
      alert("Hello World");
},false);

這里為按鈕添加兩個事件處理程序抢肛。這兩個事件處理程序會按照添加他們的順序出發(fā)肃拜,因此首先會顯示元素的ID痴腌,其次會顯示“Hello World!”消息燃领。
通過addEventListener()添加的事件處理程序 只能使用removeEventListener()來移除士聪;移除時傳入的參數(shù)與處理程序時使用的參數(shù)想通。這也意味著通過addEventListener()添加的匿名函數(shù)將無法移除猛蔽,如下面的例子所示剥悟。

var btn = document.getElementById("myBtn");
    var handler = function(){
        alert(this.id);
    };
btn.addEventListener("click", handler, false);
btn.removeEventListener("click", handler, false); 

大多數(shù)情況下,都是將事件處理程序添加到時間流的冒泡階段曼库,這樣可以最大限度地兼容各種瀏覽器区岗。最好只在需要在事件到達目標之前截獲它的時候?qū)⑹录幚沓绦蛱砑拥讲东@階段。如果不是特別需要毁枯,不建議在事件捕獲階段注冊時事件處理程序慈缔。

IE中,attachEvent(),detachEvent()种玛。這兩個方法接受相同的兩個參數(shù):事件處理程序名稱與時間處理程序函數(shù)藐鹤。由于IE8及更早版本只支持時間冒泡,所以通過attachEvent()添加的事件處理程序都會被添加到冒泡階段赂韵。

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末娱节,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子祭示,更是在濱河造成了極大的恐慌肄满,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,544評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件质涛,死亡現(xiàn)場離奇詭異稠歉,居然都是意外死亡,警方通過查閱死者的電腦和手機汇陆,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,430評論 3 392
  • 文/潘曉璐 我一進店門轧抗,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人瞬测,你說我怎么就攤上這事【琅冢” “怎么了月趟?”我有些...
    開封第一講書人閱讀 162,764評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長恢口。 經(jīng)常有香客問我孝宗,道長,這世上最難降的妖魔是什么耕肩? 我笑而不...
    開封第一講書人閱讀 58,193評論 1 292
  • 正文 為了忘掉前任因妇,我火速辦了婚禮问潭,結果婚禮上,老公的妹妹穿的比我還像新娘婚被。我一直安慰自己狡忙,他們只是感情好,可當我...
    茶點故事閱讀 67,216評論 6 388
  • 文/花漫 我一把揭開白布址芯。 她就那樣靜靜地躺著灾茁,像睡著了一般。 火紅的嫁衣襯著肌膚如雪谷炸。 梳的紋絲不亂的頭發(fā)上北专,一...
    開封第一講書人閱讀 51,182評論 1 299
  • 那天,我揣著相機與錄音旬陡,去河邊找鬼拓颓。 笑死,一個胖子當著我的面吹牛描孟,可吹牛的內(nèi)容都是我干的驶睦。 我是一名探鬼主播,決...
    沈念sama閱讀 40,063評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼画拾,長吁一口氣:“原來是場噩夢啊……” “哼啥繁!你這毒婦竟也來了?” 一聲冷哼從身側響起青抛,我...
    開封第一講書人閱讀 38,917評論 0 274
  • 序言:老撾萬榮一對情侶失蹤旗闽,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后蜜另,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體适室,經(jīng)...
    沈念sama閱讀 45,329評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,543評論 2 332
  • 正文 我和宋清朗相戀三年举瑰,在試婚紗的時候發(fā)現(xiàn)自己被綠了捣辆。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,722評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡此迅,死狀恐怖汽畴,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情耸序,我是刑警寧澤忍些,帶...
    沈念sama閱讀 35,425評論 5 343
  • 正文 年R本政府宣布,位于F島的核電站坎怪,受9級特大地震影響罢坝,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜搅窿,卻給世界環(huán)境...
    茶點故事閱讀 41,019評論 3 326
  • 文/蒙蒙 一嘁酿、第九天 我趴在偏房一處隱蔽的房頂上張望隙券。 院中可真熱鬧,春花似錦闹司、人聲如沸娱仔。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,671評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽拟枚。三九已至,卻和暖如春众弓,著一層夾襖步出監(jiān)牢的瞬間恩溅,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,825評論 1 269
  • 我被黑心中介騙來泰國打工谓娃, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留脚乡,地道東北人。 一個月前我還...
    沈念sama閱讀 47,729評論 2 368
  • 正文 我出身青樓滨达,卻偏偏與公主長得像奶稠,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子捡遍,可洞房花燭夜當晚...
    茶點故事閱讀 44,614評論 2 353

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

  • JavaScript 程序采用了異步事件驅(qū)動編程模型锌订。在這種程序設計風格下,當文檔画株、瀏覽器辆飘、元素或與之相關的對象發(fā)...
    劼哥stone閱讀 1,256評論 3 11
  • 聲明:本文來源于http://www.webzsky.com/?p=731我只是在這里作為自己的學習筆記整理一下(...
    angryyan閱讀 7,006評論 1 6
  • 一蜈项、問答 1. dom對象的innerText和innerHTML有什么區(qū)別? innerHTML: 也就是從對象...
    饑人谷_羅偉恩閱讀 596評論 0 2
  • 如何批量操作 css 如何獲取 DOM 計算后的樣式 使用getComputedStyle獲取元素計算后的樣式 實...
    _Dot912閱讀 558評論 1 3
  • 日子一天天逝去续挟,我一天天地成長紧卒。不禁思索,在這過程中我得到了什么诗祸?又失去了什么跑芳? 瓊丶安德森曾發(fā)出感慨:“在一個人...
    辭蕪閱讀 169評論 2 0