淺談DOM的事件綁定

事件綁定的方式

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

Bind in HTML

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

CLICK ME

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

用字符串表示一段函數：

CLICK ME

點擊可以發現，console:

1

?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 組對比：

1

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);

}

2

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);

}

3

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);

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

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);

}

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

推薦閱讀更多精彩內容

  • dom對象的innerText和innerHTML有什么區別？ innerHTML指的是從對象的起始位置到終止位置...
    coolheadedY閱讀 501評論 0贊 0
  • DOM0級和DOM2級在事件監聽使用方式上有什么區別？ DOM0級事件監聽：用JavaScript指定事件處理程序...
    LeeoZz閱讀 389評論 0贊 1
  • 聲明：本文來源于http://www.webzsky.com/?p=731我只是在這里作為自己的學習筆記整理一下（...
    angryyan閱讀 7,130評論 1贊 6
  • dom對象的innerText和innerHTML有什么區別？Node.innerText這個API不是W3C標準...
    老虎愛吃母雞閱讀 461評論 0贊 0
  • 《熱愛生命》 作者：汪國真 我不去想， 是否能夠成功 ， 既然選擇了遠方 ， 便只顧風雨兼程。 我不去想， 能否贏...
    哇咔咔呀閱讀 316評論 0贊 0