事件是一種異步編程的實(shí)現(xiàn)方式，本質(zhì)上是程序各個組成部分之間的通信。
DOM支持大量的事件，本節(jié)介紹DOM的事件編程。
一、EventTarget接口（即三個方法）
DOM的事件操作（監(jiān)聽和觸發(fā)），都定義在EventTarget接口。Element節(jié)點(diǎn)、document節(jié)點(diǎn)和window對象，都部署了這個接口。此外，XMLHttpRequest、AudioNode、AudioContext等瀏覽器內(nèi)置對象，也部署了這個接口。
該接口就是三個方法。
- addEventListener：綁定事件的監(jiān)聽函數(shù)。
- removeEventListener：移除事件的監(jiān)聽函數(shù)。
- dispatchEvent：觸發(fā)事件。
1.1、addEventListener()
addEventListener方法用于在當(dāng)前節(jié)點(diǎn)或?qū)ο笊?，定義一個特定事件的監(jiān)聽函數(shù)。
//使用格式
target.addEventListener(type, listener[, useCapture]);
//實(shí)例
window.addEventListener('load', function(){...}, false);
addEventListener方法接受三個參數(shù)。
- type：事件名稱，大小寫敏感。
- listener：監(jiān)聽函數(shù)。事件發(fā)生時，會調(diào)用該監(jiān)聽函數(shù)。
- useCapture：布爾值，表示監(jiān)聽函數(shù)是否在捕獲階段（capture）觸發(fā)，默認(rèn)為
false（監(jiān)聽函數(shù)只在冒泡階段被觸發(fā)）。老式瀏覽器規(guī)定該參數(shù)必寫，較新版本的瀏覽器允許該參數(shù)可選。為了保持兼容，建議總是寫上該參數(shù)。
下面是一個例子。
function hello() {
console.log('Hello world');
}
var button = document.getElementById('btn');
button.addEventListener('click', hello, false);
上面代碼中，addEventListener方法為button元素節(jié)點(diǎn)，綁定click事件的監(jiān)聽函數(shù)hello，該函數(shù)只在冒泡階段觸發(fā)。
addEventListener方法可以為當(dāng)前對象的同一個事件，添加多個監(jiān)聽函數(shù)。這些函數(shù)按照添加順序觸發(fā)，即先添加先觸發(fā)。如果為同一個事件多次添加同一個監(jiān)聽函數(shù)，該函數(shù)只會執(zhí)行一次，多余的添加將自動被去除（不必使用removeEventListener方法手動去除）。
function hello(){
console.log('Hello world');
}
document.addEventListener('click', hello, false); //同一事件多次添加同一監(jiān)聽函數(shù)
document.addEventListener('click', hello, false);
執(zhí)行上面代碼，點(diǎn)擊文檔只會輸出一行Hello world。
如果希望向監(jiān)聽函數(shù)傳遞參數(shù)，可以用匿名函數(shù)包裝一下監(jiān)聽函數(shù)。
function print(x){
console.log(x);
}
var el = document.getElementById('div1');
el.addEventListener('click', function(){
print('Hello');
}, false);
上面代碼通過匿名函數(shù)，向監(jiān)聽函數(shù)print傳遞了一個參數(shù)。
1.2、removeEventListener()
removeEventListener方法用來移除addEventListener方法添加的事件監(jiān)聽函數(shù)。
div.addEventListener('click', listener, false);
div.removeEventListener('click', listener, false);
removeEventListener方法的參數(shù)，與addEventListener方法完全一致。它的第一個參數(shù)“事件類型”，大小寫敏感。
注意，removeEventListener方法移除的監(jiān)聽函數(shù)，必須與對應(yīng)的addEventListener方法的參數(shù)完全一致，而且必須在同一個元素節(jié)點(diǎn)，否則無效。
1.3、dispatchEvent()
dispatchEvent方法在當(dāng)前節(jié)點(diǎn)上觸發(fā)指定事件，從而觸發(fā)監(jiān)聽函數(shù)的執(zhí)行。該方法返回一個布爾值，只要有一個監(jiān)聽函數(shù)調(diào)用了Event.preventDefault()，則返回值為false，否則為true。
target.dispatchEvent(event)
dispatchEvent方法的參數(shù)是一個Event對象的實(shí)例。
para.addEventListener('click', hello, false);
var event = new Event('click');
para.dispatchEvent(event);
上面代碼在當(dāng)前節(jié)點(diǎn)觸發(fā)了click事件。
如果dispatchEvent方法的參數(shù)為空，或者不是一個有效的事件對象，將報(bào)錯。
下面代碼根據(jù)dispatchEvent方法的返回值，判斷事件是否被取消了。
var canceled = !cb.dispatchEvent(event);
if (canceled) {
console.log('事件取消');
} else {
console.log('事件未取消');
}
}
二、監(jiān)聽函數(shù)
監(jiān)聽函數(shù)（listener）是事件發(fā)生時，程序所要執(zhí)行的函數(shù)。它是事件驅(qū)動編程模式的主要編程方式。
DOM提供三種方法，可以用來為事件綁定監(jiān)聽函數(shù)。
2.1、HTML標(biāo)簽的on-屬性
HTML語言允許在元素標(biāo)簽的屬性中，直接定義某些事件的監(jiān)聽代碼。
<body onload="doSomething()">
<div onclick="console.log('觸發(fā)事件')">
上面代碼為body節(jié)點(diǎn)的load事件、div節(jié)點(diǎn)的click事件，指定了監(jiān)聽函數(shù)。
使用這個方法指定的監(jiān)聽函數(shù)，只會在冒泡階段觸發(fā)。
注意，使用這種方法時，on-屬性的值是將會執(zhí)行的代碼，而不是一個函數(shù)。
<!-- 正確 -->
<body onload="doSomething()">
<!-- 錯誤 -->
<body onload="doSomething">
一旦指定的事件發(fā)生，on-屬性的值是原樣傳入JS引擎執(zhí)行。因此如果要執(zhí)行函數(shù)，不要忘記加上一對圓括號。
另外，Element元素節(jié)點(diǎn)的setAttribute方法，其實(shí)設(shè)置的也是這種效果。
Element.setAttribute('onclick', 'doSomething()');
2.2、Element節(jié)點(diǎn)的事件屬性
Element節(jié)點(diǎn)對象有事件屬性，同樣可以指定監(jiān)聽函數(shù)。
window.onload = doSomething;
div.onclick = function(event){
console.log('觸發(fā)事件');
};
使用這個方法指定的監(jiān)聽函數(shù)，只會在冒泡階段觸發(fā)。
2.3、addEventListener方法
通過Element節(jié)點(diǎn)、document節(jié)點(diǎn)、window對象的addEventListener方法，也可以定義事件的監(jiān)聽函數(shù)。
window.addEventListener('load', doSomething, false);
在上面三種方法中，第一種“HTML標(biāo)簽的on-屬性”，違反了HTML與JS代碼相分離的原則；第二種“Element節(jié)點(diǎn)的事件屬性”的缺點(diǎn)是，同一個事件只能定義一個監(jiān)聽函數(shù)，也就是說，如果定義兩次onclick屬性，后一次定義會覆蓋前一次。因此，這兩種方法都不推薦使用，除非是為了程序的兼容問題，因?yàn)樗袨g覽器都支持這兩種方法。
addEventListener是推薦的指定監(jiān)聽函數(shù)的方法。它的優(yōu)點(diǎn)如下：
- 可以針對同一個事件，添加多個監(jiān)聽函數(shù)
- 能夠指定在哪個階段（捕獲階段還是冒泡階段）觸發(fā)監(jiān)聽函數(shù)
- 除了DOM節(jié)點(diǎn)，還可以部署
window、XMLHttpRequest等對象上面，等于統(tǒng)一了整個JS的監(jiān)聽函數(shù)接口。
2.4、this對象的指向
實(shí)際編程中，監(jiān)聽函數(shù)內(nèi)部的this對象，常常需要指向觸發(fā)事件的那個Element節(jié)點(diǎn)。
addEventListener方法指定的監(jiān)聽函數(shù)，內(nèi)部的this對象總是指向觸發(fā)事件的那個節(jié)點(diǎn)。
//HTML代碼
//<p id="para">Hello</p>
var id = 'doc';
var para = document.getElementById('para');
function hello(){
console.log(this.id);
}
para.addEventListener('click', hello, false);
執(zhí)行上面代碼，點(diǎn)擊<p>節(jié)點(diǎn)會輸出para。這是因?yàn)楸O(jiān)聽函數(shù)被拷貝成了節(jié)點(diǎn)的一個屬性，所以this指向節(jié)點(diǎn)對象。使用下面的寫法，會看得更清楚。
para.onclick = hello;
如果將監(jiān)聽函數(shù)部署在Element節(jié)點(diǎn)的on-屬性上面，this不會指向觸發(fā)事件的元素節(jié)點(diǎn)。
<p id="para" onclick="hello()">Hello</p>
<!-- 或者使用JavaScript代碼 -->
<script>
pElement.setAttribute('onclick', 'hello()');
</script>
執(zhí)行上面代碼，點(diǎn)擊<p>節(jié)點(diǎn)會輸出doc。這是因?yàn)檫@里只是調(diào)用hello函數(shù)，而hello函數(shù)實(shí)際是在全局作用域執(zhí)行，相當(dāng)于下面的代碼。
para.onclick = function () {
hello();
}
一種解決方法是，不引入函數(shù)作用域，直接在on-屬性寫入所要執(zhí)行的代碼。因?yàn)?code>on-屬性是在當(dāng)前節(jié)點(diǎn)上執(zhí)行的。
<p id="para" onclick="console.log(id)">Hello</p>
<!-- 或者 -->
<p id="para" onclick="console.log(this.id)">Hello</p>
上面兩行，最后輸出的都是para。
總結(jié)一下，以下寫法的this對象都指向Element節(jié)點(diǎn)。
// JavaScript代碼
element.onclick = print
element.addEventListener('click', print, false)
element.onclick = function () {console.log(this.id);}
// HTML代碼
<element onclick="console.log(this.id)">
以下寫法的this對象，都指向全局對象。
// JavaScript代碼
element.onclick = function (){ doSomething() };
element.setAttribute('onclick', 'doSomething()');
// HTML代碼
<element onclick="doSomething()">
三、事件的傳播
3.1、傳播的三個階段
當(dāng)一個事件發(fā)生后，它會在不同的DOM節(jié)點(diǎn)之間傳播（propagation）。這種傳播分成三個階段：
- 第一階段：從window對象傳導(dǎo)到目標(biāo)節(jié)點(diǎn)，稱為“捕獲階段”（capture phase）。
- 第二階段：在目標(biāo)節(jié)點(diǎn)上觸發(fā)，稱為“目標(biāo)階段”（target phase）。
- 第三階段：從目標(biāo)節(jié)點(diǎn)傳導(dǎo)回window對象，稱為“冒泡階段”（bubbling phase）。
這種三階段的傳播模型，會使得一個事件在多個節(jié)點(diǎn)上觸發(fā)（只要節(jié)點(diǎn)上綁定對應(yīng)事件的監(jiān)聽函數(shù)）。比如，假設(shè)點(diǎn)擊<div>之中嵌套一個<p>節(jié)點(diǎn)。
<div>
<p>Click Me</p>
</div>
如果對這兩個節(jié)點(diǎn)的click事件都設(shè)定監(jiān)聽函數(shù)，則click事件會被觸發(fā)四次。
var phase = {
1: 'capture',
2: 'target',
3: 'bubble'
};
var div = document.querySelector('div');
var p = document.querySelector('p');
div.addEventListener('click', callback, true); //函數(shù)只在捕獲階段被觸發(fā)
p.addEventListener('click', callback, true);
div.addEventListener('click', callback, false); //函數(shù)只在冒泡階段被觸發(fā)
p.addEventListener('click', callback, false);
function callback(event){
var tag = event.currentTarget.tagName;
var phase = phases[event.eventPhase];
console.log("Tag: '" + tag + "'. EventPhase: '" + phase + "'");
}
// 點(diǎn)擊以后的結(jié)果
// Tag: 'DIV'. EventPhase: 'capture'
// Tag: 'P'. EventPhase: 'target'
// Tag: 'P'. EventPhase: 'target'
// Tag: 'DIV'. EventPhase: 'bubble'
上面的代碼表示，click事件被觸發(fā)了四次：<p>節(jié)點(diǎn)的捕獲階段和冒泡階段各一次，<div>節(jié)點(diǎn)的捕獲和冒泡階段各一次。
1、捕獲階段：事件從
<div>向<p>傳播時，觸發(fā)<div>的click事件；
2、目標(biāo)階段：事件從<div>到達(dá)<p>時，觸發(fā)<p>的click事件；
3、目標(biāo)階段：事件離開<p>時，觸發(fā)<p>的click事件；
4、冒泡階段：事件從<p>傳回<div>時，再次觸發(fā)<div>的click事件。
注意，用戶點(diǎn)擊網(wǎng)頁的時候，瀏覽器總是假定click事件的目標(biāo)節(jié)點(diǎn)，就是點(diǎn)擊位置的嵌套最深的那個節(jié)點(diǎn)（嵌套在<div>節(jié)點(diǎn)的<p>節(jié)點(diǎn)）。所以，<p>節(jié)點(diǎn)的捕獲階段和冒泡階段，都會顯示為target階段。
事件傳播的最上層對象是window，接著依次是document，html（document.documentElement）和body（document.dody）。也就是說，如果<body>元素中有一個<div>元素，點(diǎn)擊該元素。事件的傳播順序，在捕獲階段依次為window、document、html、body、div，在冒泡階段依次為div、body、html、document、window。
3.2、事件的代理
由于事件會在冒泡階段向上傳播到父節(jié)點(diǎn)，因此可以把子節(jié)點(diǎn)的監(jiān)聽函數(shù)定義在父節(jié)點(diǎn)上，由父節(jié)點(diǎn)的監(jiān)聽函數(shù)統(tǒng)一處理多個子元素的事件。這種方法叫做事件的代理（delegation）。
var ul = document.querySelector('ul');
ul.addEventListener('click', function(event) {
if (event.target.tagName.toLowerCase() === 'li') {
// some code
}
});
上面代碼的click事件的監(jiān)聽函數(shù)定義在<ul>節(jié)點(diǎn)上，但是實(shí)際上，它處理的是子節(jié)點(diǎn)<li>的click事件。這樣做的好處是，只要定義一個監(jiān)聽函數(shù)，就能處理多個子節(jié)點(diǎn)的事件，而且以后再添加子節(jié)點(diǎn)，監(jiān)聽函數(shù)依然有效。
如果希望事件到某個節(jié)點(diǎn)為止，不再傳播，可以使用事件對象的stopPropagation方法。
p.addEventListener('click', function(event) {
event.stopPropagation();
});
使用上面的代碼以后，click事件在冒泡階段到達(dá)<p>節(jié)點(diǎn)以后，就不再向上（父節(jié)點(diǎn)的方向）傳播了。
但是，stopPropagation方法只會阻止當(dāng)前監(jiān)聽函數(shù)的傳播，不會阻止<p>節(jié)點(diǎn)上的其他click事件的監(jiān)聽函數(shù)。如果想要不再觸發(fā)那些監(jiān)聽函數(shù)，可以使用stopImmediatePropagation方法。
p.addEventListener('click', function(event) {
event.stopImmediatePropagation();
});
p.addEventListener('click', function(event) {
// 不會被觸發(fā)
});
四、Event對象
事件發(fā)生以后，會生成一個事件對象，作為參數(shù)傳給監(jiān)聽函數(shù)。瀏覽器原生提供一個Event對象，所有的事件都是這個對象的實(shí)例，或者說繼承了Event.prototype對象。
Event對象本身就是一個構(gòu)造函數(shù)，可以用來生成新的實(shí)例。
event = new Event(typeArg, eventInit);
4.1、event.bubbles，event.eventPhase
以下屬性與事件的階段有關(guān)。
（1）、bubbles
bubbles屬性返回一個布爾值，表示當(dāng)前事件是否會冒泡。該屬性為只讀屬性，只能在新建事件時改變。除非顯示聲明，Event構(gòu)造函數(shù)生成的事件，默認(rèn)是不冒泡的。
function goInput(e) {
if (!e.bubbles) {
passItOn(e);
} else {
doOutput(e);
}
}
上面代碼根據(jù)事件是否冒泡，調(diào)用不同的函數(shù)。
（2）、eventPhase
eventPhase屬性返回一個整數(shù)值，表示事件目前所處的節(jié)點(diǎn)。
var phase = event.eventPhase;
0，事件目前沒有發(fā)生。
1，事件目前處于捕獲階段，即處于從祖先節(jié)點(diǎn)向目標(biāo)節(jié)點(diǎn)的傳播過程中。該過程是從window對象到document節(jié)點(diǎn)，再到HTMLHtmlElement節(jié)點(diǎn)，直到目標(biāo)節(jié)點(diǎn)的父節(jié)點(diǎn)為止。
2，事件到達(dá)目標(biāo)節(jié)點(diǎn)，即target屬性指向的那個節(jié)點(diǎn)。
3，事件處于冒泡階段，即處于從目標(biāo)節(jié)點(diǎn)向祖先節(jié)點(diǎn)的反向傳播過程中。該過程是從父節(jié)點(diǎn)一直到window對象。只有bubbles屬性為true時，這個階段才可能發(fā)生。
4.2、event.cancelable，event.defaultPrevented
以下屬性與事件的默認(rèn)行為有關(guān)。
（1）、cancelable
cancelable屬性返回一個布爾值，表示事件是否可以取消。該屬性為只讀屬性，只能在新建事件時改變。除非顯示聲明，Event構(gòu)造函數(shù)生成的事件，默認(rèn)是不可以取消的。
var bool = event.cancelable;
如果要取消某個事件，需要在這個事件上面調(diào)用preventDefault方法，這會阻止瀏覽器對某種事件部署的默認(rèn)行為。
（2）、defaultPrevented
defaultPrevented屬性返回一個布爾值，表示該事件是否調(diào)用過defaultPrevented方法。
if (e.defaultPrevented) {
// ...
}
4.3、event.currentTarget，event.target
以下屬性與事件的目標(biāo)節(jié)點(diǎn)有關(guān)。
（1）、currentTarget
currentTarget屬性返回事件當(dāng)前所在的節(jié)點(diǎn)，即正在執(zhí)行的監(jiān)聽函數(shù)所綁定的那個節(jié)點(diǎn)。作為比較，target屬性返回事件發(fā)生的節(jié)點(diǎn)。
如果監(jiān)聽函數(shù)在捕獲階段和冒泡階段觸發(fā)，那么這兩個屬性返回值是不一樣的。
function hide(e){
console.log(this === e.currentTarget); // true
e.currentTarget.style.visibility = "hidden";
}
para.addEventListener('click', hide, false);
上面代碼中，點(diǎn)擊para節(jié)點(diǎn)，該節(jié)點(diǎn)會不可見。另外，在監(jiān)聽函數(shù)中，currentTarget屬性實(shí)際上等同于this對象。
（2）、target
target屬性返回觸發(fā)事件的那個節(jié)點(diǎn)，即事件最初發(fā)生的節(jié)點(diǎn)。如果監(jiān)聽函數(shù)不在該節(jié)點(diǎn)觸發(fā)，那么它與currentTarget屬性返回的值是不一樣的。
function hide(e){
console.log(this === e.target); // 有可能不是true
e.target.style.visibility = "hidden";
}
// HTML代碼為
// <p id="para">Hello <em>World</em></p>
para.addEventListener('click', hide, false);
4.4、event.type，event.detail，event.timeStamp，event.isTrusted
以下屬性與事件對象的其他信息相關(guān)。
（1）、type
type屬性返回一個字符串，表示事件類型，大小寫敏感。
var string = event.type;
（2）、detail
detail屬性返回一個數(shù)值，表示事件的某種信息。具體含義與事件類型有關(guān)，對于鼠標(biāo)事件，表示鼠標(biāo)按鍵在某個位置按下的次數(shù)，比如對于dbclick事件，detail屬性的值總是2。
（3）、timeStamp
timeStamp屬性返回一個毫秒時間戳，表示事件發(fā)生的時間。
var number = event.timeStamp;
（4）、isTrusted
isTrusted屬性返回一個布爾值，表示該事件是否為真實(shí)用戶觸發(fā)。
var bool = event.isTrusted;
用戶觸發(fā)的事件返回true，腳本觸發(fā)的事件返回false。
4.5、event.preventDefault()
preventDefault方法取消瀏覽器對當(dāng)前事件的默認(rèn)行為，比如點(diǎn)擊鏈接后，瀏覽器跳轉(zhuǎn)到指定頁面，或者按一下空格鍵，頁面向下滾動一段距離。該方法生效的前提是，事件的cancelable屬性為true，如果為false，則調(diào)用該方法沒有任何效果。
該方法不會阻止事件的進(jìn)一步傳播（stopPropagation方法可用于這個目的）。只要在事件的傳播過程中（捕獲階段、目標(biāo)階段、冒泡階段皆可），使用了preventDefault方法，該事件的默認(rèn)方法就不會執(zhí)行。
// HTML代碼為
// <input type="checkbox" id="my-checkbox" />
var cb = document.getElementById('my-checkbox');
cb.addEventListener(
'click',
function (e){ e.preventDefault(); },
false
);
上面代碼為點(diǎn)擊單選框的事件，設(shè)置監(jiān)聽函數(shù)，取消默認(rèn)行為。由于瀏覽器的默認(rèn)行為是選中單選框，所以這段代碼會導(dǎo)致無法選中單選框。
如果監(jiān)聽函數(shù)最后返回布爾值false（即return false），瀏覽器也不會觸發(fā)默認(rèn)行為，與preventDefault方法有等同效果。
4.6、event.stopPropagation()
stopPropagation方法阻止事件在DOM中繼續(xù)傳播，防止再觸發(fā)定義在別的節(jié)點(diǎn)上的監(jiān)聽函數(shù)，但是不包括在當(dāng)前節(jié)點(diǎn)上新定義的事件監(jiān)聽函數(shù)。
function stopEvent(e) {
e.stopPropagation();
}
el.addEventListener('click', stopEvent, false);
將上面函數(shù)指定為監(jiān)聽函數(shù)，會阻止事件進(jìn)一步冒泡到el節(jié)點(diǎn)的父節(jié)點(diǎn)。
4.7、event.stopImmediatePropagation()
stopImmediatePropagation方法阻止同一個事件的其他監(jiān)聽函數(shù)被調(diào)用。
如果同一個節(jié)點(diǎn)對于同一個事件指定了多個監(jiān)聽函數(shù)，這些函數(shù)會根據(jù)添加的順序依次調(diào)用。只要其中一個監(jiān)聽函數(shù)調(diào)用了stopImmediatePropagation方法，其他的監(jiān)聽函數(shù)就不會再執(zhí)行了。
function l1(e){
e.stopImmediatePropagation();
}
function l2(e){
console.log('hello world');
}
el.addEventListener('click', l1, false);
el.addEventListener('click', l2, false);
上面代碼的el節(jié)點(diǎn)上，為click事件添加了兩個監(jiān)聽函數(shù)l1和l2。由于l1調(diào)用了stopImmediatePropagation方法，所以l2不會被調(diào)用。
