淺談DOM的事件綁定

事件綁定的方式

給 DOM 元素綁定事件分為兩大類：在 html 中直接綁定和在 JavaScript 中綁定。

Bind in HTML

在 HTML 中綁定事件叫做內聯綁定事件，HTML 的元素中有如onclick這樣的on***屬性，它可以給這個 DOM 元素綁定一個類型的事件，主要是這樣的：

CLICK ME

這里的***有兩種形式：

用字符串表示一段函數：

CLICK ME

點擊可以發現，console:

?CLICK ME?

var a = 1; console.log(a); console.log(this);這一段字符串被當作 js 執行了，同時this指向當前這個點擊的元素。

用函數名表示：

CLICK ME

這里需要添加script去定義函數：

functionfoo(_this) {

console.log(_this);

console.log(this);

}

可以觀察到，console：

?CLICK ME?

window

這里的this指向了全局，傳入的參數是點擊的 DOM 元素，其實和第一種方式是一樣的，都是在onclick=后面指向了一段js的字符串，不同的是在這個字符串中是執行了一個函數名，而這個函數我們在全局中定義了，所以點擊的時候可以執行，然后傳入的參數this也就是一樣的道理了。

或者多說一句，這里的字符串才是真正賦值給onclick的函數，這里我們是在函數里面再執行了foo函數。

然而這內聯的方式綁定時間不利于分離，所以一般我們不推薦這種做法，所以也就不再多闡述了

Bind in JavaScript

dom.onclick

先上栗子：

CLICK ME

document.getElementById('clickme').onclick =function (e) {

console.log(this.id);

console.log(e);

};

觀察 console：

clickme

MouseEvent {isTrusted: true,screenX:65,screenY:87,clientX:65,clientY:13…}

首先，我們獲取到了dom元素，然后給它的onclick屬性賦值了一個函數；

點擊dom我們發現那個函數執行了，同時發現函數中的this是指向當前的這個dom元素；

細細一想，其實這和前面用的在html中內聯綁定函數是一樣的，我們同樣是給dom的onclick屬性賦值一個函數，然后函數中的this指向當前元素，只是這個過程這里我們是在 js 中做的；

而還有一點區別就是前面的是賦值一段 js 字符串，這里是賦值一個函數，所以可以接受一個參數：event，這個參數是點擊的事件對象。

用賦值綁定函數的一個缺點就是它只能綁定一次：

document.getElementById('clickme').onclick =function (e) {

console.log(this.id);

};

document.getElementById('clickme').onclick =function (e) {

console.log(this.id);

};

可以看到這里只打印了一次clickme。

addEventListener

這個才是我們需要重點介紹的一個函數

語法

target.addEventListener(type, listener[, useCapture]);

target: 表示要監聽事件的目標對象，可以是一個文檔上的元素Document本身，Window或者XMLHttpRequest；

type: 表示事件類型的字符串，比如:click、change、touchstart…；

listener: 當指定的事件類型發生時被通知到的一個對象。該參數必是實現 EventListener 接口的一個對象或函數。

useCapture: 設置事件的?捕獲或者冒泡?(后文闡述) ，true: 捕獲，false: 冒泡*，默認為false。

簡單栗子

CLICK ME

var clickme =document.getElementById('clickme');

clickme.addEventListener('click', foo1);

functionfoo1(event) {

console.log(this.id);

console.log(event);

}

觀察 console：

clickme

MouseEvent {isTrusted: true,screenX:37,screenY:88,clientX:37,clientY:14…}

監聽函數中的this指向當前的dom元素，函數接受一個event參數。

綁定函數

綁定多個函數

addEventListener可以給同一個dom元素綁定多個函數：

CLICK ME

var clickme =document.getElementById('clickme');

clickme.addEventListener('click', foo1);

clickme.addEventListener('click', foo2);

functionfoo1(event) {

console.log(111);

}

functionfoo1(event) {

console.log(222);

}

可以看到 console：

111

222

我們可以看到兩個函數都執行了，并且執行順序按照綁定的順序執行。

改變一下，如果我們的useCapture參數不同呢？

看下面 3 組對比：

var clickme =document.getElementById('clickme');

clickme.addEventListener('click', foo1,true);

clickme.addEventListener('click', foo2,true);

functionfoo1(event) {

console.log(111);

}

functionfoo1(event) {

console.log(222);

}

var clickme =document.getElementById('clickme');

clickme.addEventListener('click', foo1,true);

clickme.addEventListener('click', foo2,false);

functionfoo1(event) {

console.log(111);

}

functionfoo1(event) {

console.log(222);

}

var clickme =document.getElementById('clickme');

clickme.addEventListener('click', foo1,false);

clickme.addEventListener('click', foo2,true);

functionfoo1(event) {

console.log(111);

}

functionfoo1(event) {

console.log(222);

}

可以看到，console 并沒有改變，所以執行順序只和綁定順序有關，和useCapture無關。

結論：

我們可以給一個dom元素綁定多個函數，并且它的執行順序按照綁定的順序執行。

同一個元素綁定同一個函數

我們給一個dom元素綁定同一個函數兩次試試：

CLICK ME

var clickme =document.getElementById('clickme');

clickme.addEventListener('click', foo1);

functionfoo1(event) {

console.log(111);

}

觀察 console:

111

可以看到函數只執行了一次；

換一種方式：

var clickme =document.getElementById('clickme');

clickme.addEventListener('click', foo1,true);

clickme.addEventListener('click', foo1,false);

functionfoo1(event) {

console.log(111);

}

觀察 console:

111

可以看到函數執行了兩次。

結論：

我們可以給一個dom元素綁定同一個函數，最多只能綁定useCapture類型不同的兩次。

IE下使用attachEvent/detachEvent

addEventListener只支持到 IE 9，所以為了兼容性考慮，在兼容 IE 8 以及以下瀏覽器可以用attachEvent函數，和addEventListener函數表現一樣，除了它綁定函數的this會指向全局這個缺點以外

事件執行順序的 PK

1. addEventListener 和 dom.onclick

CLICK ME

var clickme =document.getElementById('clickme');

clickme.addEventListener('click', foo1,true);

clickme.onclick = foo2;

clickme.addEventListener('click', foo3,true);

functionfoo1(event) {

console.log(111);

}

functionfoo2(event) {

console.log(222);

}

functionfoo3(event) {

console.log(333);

}

觀察 console：

111

222

333

可見執行順序只和綁定順序有關

2. addEventListener 間的比較

見上文

事件的解綁

與事件綁定相對應的就是事件解綁了。

1. 通過 dom 的 on** 屬性設置的事件

對于 Bind in HTML 和dom.onclick綁定的事件都可以用dom.onclick = null來解綁事件。

2. removeEventListener

通過addEventListener綁定的事件可以使用removeEventListener來解綁，removeEventListener接受的參數和addEventListener是一樣的

CLICK ME

var clickme =document.getElementById('clickme');

clickme.addEventListener('click', foo1);

functionfoo1(event) {

console.log(111);

}

clickme.removeEventListener('click', foo1,true);

這里發現事件并沒有取消綁定，發現removeEventListener的useCapture的參數原來和綁定時候傳入的不一致，我們改成false之后發現事件取消了。

結論：

對于使用removeEventListener函數解綁事件，需要傳入的listeneruseCapture應和addEventListener一致才可以解綁事件。

3. detachEvent

與attachEvent對應

DOM 事件

Document

事件冒泡

事件開始時由最具體的元素接受，然后逐級向上傳播到較為不具體的節點。

比如上面的 HTML ，冒泡的順序： div3 -> div3 -> div1 -> body -> html -> document (-> window)

事件捕獲

事件捕獲的思想是不太具體的DOM節點應該更早接收到事件，而最具體的節點應該最后接收到事件。與事件冒泡的順序相反。

比如上面的 HTML ，捕獲的順序： document -> html -> body -> div1 -> div2 -> div3

DOM事件流

DOM事件流包括三個階段：事件捕獲階段、處于目標階段、事件冒泡階段。首先發生的事件捕獲，為截獲事件提供機會。然后是實際的目標接受事件。最后一個階段是時間冒泡階段，可以在這個階段對事件做出響應。

回到 addEventListener

我們來做幾個小對比：

CLICK ME

栗子 1

document.getElementById('wrap').addEventListener('click', foo1,false);

document.getElementById('clickme').addEventListener('click', foo2,false);

functionfoo1(event) {

console.log(111);

}

functionfoo2(event) {

console.log(222);

}

console：

222

111

這里兩個事件都是冒泡類型，所以是從內到外；

栗子 2

document.getElementById('wrap').addEventListener('click', foo1,true);

document.getElementById('clickme').addEventListener('click', foo2,true);

functionfoo1(event) {

console.log(111);

}

functionfoo2(event) {

console.log(222);

}

console：

111

222

這里兩個事件都是捕獲類型，所以是從外到內；

栗子 3

document.getElementById('wrap').addEventListener('click', foo1,false);

document.getElementById('clickme').addEventListener('click', foo2,true);

functionfoo1(event) {

console.log(111);

}

functionfoo2(event) {

console.log(222);

}

console：

222

111

wrap 事件是冒泡，clickme 事件是捕獲，根據 dom 的事件流，先執行了捕獲階段（這里是目標階段）再到冒泡階段。

栗子 4

document.getElementById('wrap').addEventListener('click', foo1,true);

document.getElementById('clickme').addEventListener('click', foo2,false);

functionfoo1(event) {

console.log(111);

}

functionfoo2(event) {

console.log(222);

}

console：

111

222

clickme 事件是冒泡，wrap 事件是捕獲，根據 dom 的事件流，先執行了捕獲階段（這里是目標階段）再到冒泡階段。

阻止冒泡／捕獲

CLICK ME

document.getElementById('wrap').addEventListener('click', foo1);

document.getElementById('clickme').addEventListener('click', foo2);

functionfoo1(event) {

console.log(111);

}

functionfoo2(event) {

event.stopPropagation();

console.log(222);

}

最后編輯于：2017.12.04 19:16:31

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市，隨后出現的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
沈念sama閱讀 229,963評論 6贊 542
死咒
序言：濱河連續發生了三起死亡事件，死亡現場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機，發現死者居然都...
沈念sama閱讀 99,348評論 3贊 429
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
開封第一講書人閱讀 178,083評論 0贊 383
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長。經常有香客問我，道長，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 63,706評論 1贊 317
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮，結果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當我...
茶點故事閱讀 72,442評論 6贊 412
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著，像睡著了一般。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發上，一...
開封第一講書人閱讀 55,802評論 1贊 328
城市分裂傳說
那天，我揣著相機與錄音，去河邊找鬼。笑死，一個胖子當著我的面吹牛，可吹牛的內容都是我干的。我是一名探鬼主播，決...
沈念sama閱讀 43,795評論 3贊 446
雙鴛鴦連環套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
開封第一講書人閱讀 42,983評論 0贊 290
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當地人在樹林里發現了一具尸體，經...
沈念sama閱讀 49,542評論 1贊 335
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內容為張勛視角年9月15日...
茶點故事閱讀 41,287評論 3贊 358
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發現自己被綠了。大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 43,486評論 1贊 374
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
沈念sama閱讀 39,030評論 5贊 363
?日本核電站爆炸內幕
正文年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質發生泄漏。R本人自食惡果不足惜，卻給世界環境...
茶點故事閱讀 44,710評論 3贊 348
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 35,116評論 0贊 28
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監牢的瞬間，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 36,412評論 1贊 294
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。一個月前我還...
沈念sama閱讀 52,224評論 3贊 398
代替公主和親
正文我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
茶點故事閱讀 48,462評論 2贊 378

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

淺談DOM的事件綁定

淺談DOM的事件綁定

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

淺談DOM的事件綁定

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频