?
本文檔使用 PHP中文網(wǎng)手冊 發(fā)布
事件是一種異步編程的實現(xiàn)方式，本質(zhì)上是程序各個組成部分之間傳遞的特定消息。DOM支持大量的事件，本節(jié)介紹DOM的事件編程。
EventTarget接口
addEventListener()
removeEventListener()
dispatchEvent()
監(jiān)聽函數(shù)
HTML標簽的on-屬性
Element節(jié)點的事件屬性
addEventListener方法
this對象的指向
事件的傳播
傳播的三個階段
事件的代理
Event對象
bubbles，eventPhase
cancelable，defaultPrevented
currentTarget，target
type，detail，timeStamp，isTrusted
preventDefault()
stopPropagation()
stopImmediatePropagation()
鼠標事件
事件種類
MouseEvent對象
altKey，ctrlKey，metaKey，shiftKey
button，buttons
clientX，clientY，movementX，movementY，screenX，screenY
relatedTarget
wheel事件
鍵盤事件
altKey，ctrlKey，metaKey，shiftKey
key，charCode
進度事件
拖拉事件
事件種類
DataTransfer對象概述
DataTransfer對象的屬性
DataTransfer對象的方法
觸摸事件
Touch對象
TouchList對象
TouchEvent對象
觸摸事件的種類
表單事件
Input事件，select事件，change事件
reset事件，submit事件
文檔事件
beforeunload事件，unload事件，load事件，error事件，pageshow事件，pagehide事件
DOMContentLoaded事件，readystatechange事件
scroll事件，resize事件
hashchange事件，popstate事件
cut事件，copy事件，paste事件
焦點事件
自定義事件和事件模擬
CustomEvent()
事件的模擬
自定義事件的老式寫法
事件模擬的老式寫法
參考鏈接
EventTarget接口
DOM的事件操作（監(jiān)聽和觸發(fā)），都定義在EventTarget接口。Element節(jié)點、document節(jié)點和window對象，都部署了這個接口。此外，XMLHttpRequest、AudioNode、AudioContext等瀏覽器內(nèi)置對象，也部署了這個接口。
該接口就是三個方法，addEventListener和removeEventListener用于綁定和移除監(jiān)聽函數(shù)，dispatchEvent用于觸發(fā)事件。
addEventListener()
addEventListener方法用于在當前節(jié)點或?qū)ο笊?，定義一個特定事件的監(jiān)聽函數(shù)。
target.addEventListener(type, listener[, useCapture]);
上面是使用格式，addEventListener方法接受三個參數(shù)。
type，事件名稱，大小寫不敏感。
listener，監(jiān)聽函數(shù)。指定事件發(fā)生時，會調(diào)用該監(jiān)聽函數(shù)。
useCapture，監(jiān)聽函數(shù)是否在捕獲階段（capture）觸發(fā)（參見后文《事件的傳播》部分）。該參數(shù)是一個布爾值，默認為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é)點，綁定click事件的監(jiān)聽函數(shù)hello，該函數(shù)只在冒泡階段觸發(fā)。
可以使用addEventListener方法，為當前對象的同一個事件，添加多個監(jiān)聽函數(shù)。這些函數(shù)按照添加順序觸發(fā)，即先添加先觸發(fā)。如果為同一個事件多次添加同一個監(jiān)聽函數(shù)，該函數(shù)只會執(zhí)行一次，多余的添加將自動被去除（不必使用removeEventListener方法手動去除）。
function hello(){
console.log('Hello world');
}
document.addEventListener('click', hello, false);
document.addEventListener('click', hello, false);執(zhí)行上面代碼，點擊文檔只會輸出一行“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ù)。
removeEventListener()
removeEventListener方法用來移除addEventListener方法添加的事件監(jiān)聽函數(shù)。
div.addEventListener('click', listener, false);
div.removeEventListener('click', listener, false);removeEventListener方法的參數(shù)，與addEventListener方法完全一致。它對第一個參數(shù)“事件類型”，也是大小寫不敏感。
注意，removeEventListener方法移除的監(jiān)聽函數(shù)，必須與對應的addEventListener方法的參數(shù)完全一致，而且在同一個元素節(jié)點，否則無效。
dispatchEvent()
dispatchEvent方法在當前節(jié)點上觸發(fā)指定事件，從而觸發(fā)監(jiān)聽函數(shù)的執(zhí)行。該方法返回一個布爾值，只要有一個監(jiān)聽函數(shù)調(diào)用了Event.preventDefault()，則返回值為false，否則為true。
target.dispatchEvent(event)
dispatchEvent方法的參數(shù)是一個Event對象的實例。
para.addEventListener('click', hello, false);
var event = new Event('click');
para.dispatchEvent(event);上面代碼在當前節(jié)點觸發(fā)了click事件。
如果dispatchEvent方法的參數(shù)為空，或者不是一個有效的事件對象，將報錯。
下面代碼根據(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ù)。
HTML標簽的on-屬性
HTML語言允許在元素標簽的屬性中，直接定義某些事件的監(jiān)聽代碼。
<body onload="doSomething()">
<div onclick="console.log('觸發(fā)事件')">上面代碼為body節(jié)點的load事件、div節(jié)點的click事件，指定了監(jiān)聽函數(shù)。
使用這個方法指定的監(jiān)聽函數(shù)，只會在冒泡階段觸發(fā)。
注意，使用這種方法時，on-屬性的值是“監(jiān)聽代碼”，而不是“監(jiān)聽函數(shù)”。也就是說，一旦指定事件發(fā)生，這些代碼是原樣傳入JavaScript引擎執(zhí)行。因此如果要執(zhí)行函數(shù)，必須在函數(shù)名后面加上一對圓括號。
另外，Element節(jié)點的setAttribue方法，其實設置的也是這種效果。
el.setAttribute('onclick', 'doSomething()');Element節(jié)點的事件屬性
Element節(jié)點有事件屬性，可以定義監(jiān)聽函數(shù)。
window.onload = doSomething;
div.onclick = function(event){
console.log('觸發(fā)事件');
};使用這個方法指定的監(jiān)聽函數(shù)，只會在冒泡階段觸發(fā)。
addEventListener方法
通過Element節(jié)點、document節(jié)點、window對象的addEventListener方法，也可以定義事件的監(jiān)聽函數(shù)。
window.addEventListener('load', doSomething, false);addEventListener方法的詳細介紹，參見本節(jié)EventTarget接口的部分。
在上面三種方法中，第一種“HTML標簽的on-屬性”，違反了HTML與JavaScript代碼相分離的原則；第二種“Element節(jié)點的事件屬性”的缺點是，同一個事件只能定義一個監(jiān)聽函數(shù)，也就是說，如果定義兩次onclick屬性，后一次定義會覆蓋前一次。因此，這兩種方法都不推薦使用，除非是為了程序的兼容問題，因為所有瀏覽器都支持這兩種方法。
addEventListener是推薦的指定監(jiān)聽函數(shù)的方法。它有如下優(yōu)點：
可以針對同一個事件，添加多個監(jiān)聽函數(shù)。
能夠指定在哪個階段（捕獲階段還是冒泡階段）觸發(fā)回監(jiān)聽函數(shù)。
除了DOM節(jié)點，還可以部署在window、XMLHttpRequest等對象上面，等于統(tǒng)一了整個JavaScript的監(jiān)聽函數(shù)接口。
this對象的指向
實際編程中，監(jiān)聽函數(shù)內(nèi)部的this對象，常常需要指向觸發(fā)事件的那個Element節(jié)點。
addEventListener方法指定的監(jiān)聽函數(shù)，內(nèi)部的this對象總是指向觸發(fā)事件的那個節(jié)點。
// 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í)行上面代碼，點擊p節(jié)點會輸出para。這是因為監(jiān)聽函數(shù)被“拷貝”成了節(jié)點的一個屬性，使用下面的寫法，會看得更清楚。
para.onclick = hello;
如果將監(jiān)聽函數(shù)部署在Element節(jié)點的on-屬性上面，this不會指向觸發(fā)事件的元素節(jié)點。
<p id="para" onclick="hello()">Hello</p>
<!-- 或者使用JavaScript代碼 -->
<script>
pElement.setAttribute('onclick', 'hello()');
</script>執(zhí)行上面代碼，點擊p節(jié)點會輸出doc。這是因為這里只是調(diào)用hello函數(shù)，而hello函數(shù)實際是在全局作用域執(zhí)行，相當于下面的代碼。
para.onclick = function(){
hello();
}一種解決方法是，不引入函數(shù)作用域，直接在on-屬性寫入所要執(zhí)行的代碼。因為on-屬性是在當前節(jié)點上執(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é)點。
// 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()">事件的傳播
傳播的三個階段
當一個事件發(fā)生以后，它會在不同的DOM節(jié)點之間傳播（propagation）。這種傳播分成三個階段：
第一階段：從window對象傳導到目標節(jié)點，稱為“捕獲階段”（capture phase）。
第二階段：在目標節(jié)點上觸發(fā)，稱為“目標階段”（target phase）。
第三階段：從目標節(jié)點傳導回window對象，稱為“冒泡階段”（bubbling phase）。
這種三階段的傳播模型，會使得一個事件在多個節(jié)點上觸發(fā)。比如，假設div節(jié)點之中嵌套一個p節(jié)點。
<div> <p> Click Me </p> </div>
如果對這兩個節(jié)點的click事件都設定監(jiān)聽函數(shù)，則click事件會被觸發(fā)四次。
var phases = {
1: 'capture',
2: 'target',
3: 'bubble'
};
var div = document.querySelector('div');
var p = document.querySelector('p');
div.addEventListener('click', callback, true);
p.addEventListener('click', callback, true);
div.addEventListener('click', callback, false);
p.addEventListener('click', callback, false);
function callback(event) {
var tag = event.currentTarget.tagName;
var phase = phases[event.eventPhase];
console.log("Tag: '" + tag + "'. EventPhase: '" + phase + "'");
}
// 點擊以后的結(jié)果
// Tag: 'DIV'. EventPhase: 'capture'
// Tag: 'P'. EventPhase: 'target'
// Tag: 'P'. EventPhase: 'target'
// Tag: 'DIV'. EventPhase: 'bubble'上面代碼表示，click事件被觸發(fā)了四次：p節(jié)點的捕獲階段和冒泡階段各1次，div節(jié)點的捕獲階段和冒泡階段各1次。
捕獲階段：事件從div向p傳播時，觸發(fā)div的click事件；
目標階段：事件從div到達p時，觸發(fā)p的click事件；
目標階段：事件離開p時，觸發(fā)p的click事件；
冒泡階段：事件從p傳回div時，再次觸發(fā)div的click事件。
注意，用戶點擊網(wǎng)頁的時候，瀏覽器總是假定click事件的目標節(jié)點，就是點擊位置的嵌套最深的那個節(jié)點（嵌套在div節(jié)點的p節(jié)點）。
事件傳播的最上層對象是window，接著依次是document，html（document.documentElement）和body（document.dody）。也就是說，如果body元素中有一個div元素，點擊該元素。事件的傳播順序，在捕獲階段依次為window、document、html、body、div，在冒泡階段依次為div、body、html、document、window。
事件的代理
由于事件會在冒泡階段向上傳播到父節(jié)點，因此可以把子節(jié)點的監(jiān)聽函數(shù)定義在父節(jié)點上，由父節(jié)點的監(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é)點，但是實際上，它處理的是子節(jié)點li的click事件。這樣做的好處是，只要定義一個監(jiān)聽函數(shù)，就能處理多個子節(jié)點的事件，而且以后再添加子節(jié)點，監(jiān)聽函數(shù)依然有效。
如果希望事件到某個節(jié)點為止，不再傳播，可以使用事件對象的stopPropagation方法。
p.addEventListener('click', function(event) {
event.stopPropagation();
});使用上面的代碼以后，click事件在冒泡階段到達p節(jié)點以后，就不再向上（父節(jié)點的方向）傳播了。
但是，stopPropagation方法不會阻止p節(jié)點上的其他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對象，所有的事件都是這個對象的實例，或者說繼承了Event.prototype對象。
Event對象本身就是一個構(gòu)造函數(shù)，可以用來生成新的實例。
event = new Event(typeArg, eventInit);
Event構(gòu)造函數(shù)接受兩個參數(shù)。第一個參數(shù)是字符串，表示事件的名稱；第二個參數(shù)是一個對象，表示事件對象的配置。該參數(shù)可以有以下兩個屬性。
bubbles：布爾值，可選，默認為false，表示事件對象是否冒泡。
cancelable：布爾值，可選，默認為false，表示事件是否可以被取消。
var ev = new Event("look", {"bubbles":true, "cancelable":false});
document.dispatchEvent(ev);上面代碼新建一個look事件實例，然后使用dispatchEvent方法觸發(fā)該事件。
IE8及以下版本，事件對象不作為參數(shù)傳遞，而是通過window對象的event屬性讀取，并且事件對象的target屬性叫做srcElement屬性。所以，以前獲取事件信息，往往要寫成下面這樣。
function myEventHandler(event) {
var actualEvent = event || window.event;
var actualTarget = actualEvent.target || actualEvent.srcElement;
// ...
}上面的代碼只是為了說明以前的程序為什么這樣寫，在新代碼中，這樣的寫法不應該再用了。
以下介紹Event實例的屬性和方法。
bubbles，eventPhase
以下屬性與事件的階段有關。
（1）bubbles
bubbles屬性返回一個布爾值，表示當前事件是否會冒泡。該屬性為只讀屬性，只能在新建事件時改變。除非顯式聲明，Event構(gòu)造函數(shù)生成的事件，默認是不冒泡的。
function goInput(e) { if (!e.bubbles) {
passItOn(e);
} else {
doOutput(e);
}
}上面代碼根據(jù)事件是否冒泡，調(diào)用不同的函數(shù)。
（2）eventPhase
eventPhase屬性返回一個整數(shù)值，表示事件目前所處的節(jié)點。
var phase = event.eventPhase;
0，事件目前沒有發(fā)生。
1，事件目前處于捕獲階段，即處于從祖先節(jié)點向目標節(jié)點的傳播過程中。該過程是從Window對象到Document節(jié)點，再到HTMLHtmlElement節(jié)點，直到目標節(jié)點的父節(jié)點為止。
2，事件到達目標節(jié)點，即target屬性指向的那個節(jié)點。
3，事件處于冒泡階段，即處于從目標節(jié)點向祖先節(jié)點的反向傳播過程中。該過程是從父節(jié)點一直到Window對象。只有bubbles屬性為true時，這個階段才可能發(fā)生。
cancelable，defaultPrevented
以下屬性與事件的默認行為有關。
（1）cancelable
cancelable屬性返回一個布爾值，表示事件是否可以取消。該屬性為只讀屬性，只能在新建事件時改變。除非顯式聲明，Event構(gòu)造函數(shù)生成的事件，默認是不可以取消的。
var bool = event.cancelable;
如果要取消某個事件，需要在這個事件上面調(diào)用preventDefault方法，這會阻止瀏覽器對某種事件部署的默認行為。
（2）defaultPrevented
defaultPrevented屬性返回一個布爾值，表示該事件是否調(diào)用過preventDefault方法。
if (e.defaultPrevented) {
// ...
}currentTarget，target
以下屬性與事件的目標節(jié)點有關。
（1）currentTarget
currentTarget屬性返回事件當前所在的節(jié)點，即正在執(zhí)行的監(jiān)聽函數(shù)所綁定的那個節(jié)點。作為比較，target屬性返回事件發(fā)生的節(jié)點。如果監(jiān)聽函數(shù)在捕獲階段和冒泡階段觸發(fā)，那么這兩個屬性返回的值是不一樣的。
function hide(e){
console.log(this === e.currentTarget); // true
e.currentTarget.style.visibility = "hidden";
}
para.addEventListener('click', hide, false);上面代碼中，點擊para節(jié)點，該節(jié)點會不可見。另外，在監(jiān)聽函數(shù)中，currentTarget屬性實際上等同于this對象。
（2）target
target屬性返回觸發(fā)事件的那個節(jié)點，即事件最初發(fā)生的節(jié)點。如果監(jiān)聽函數(shù)不在該節(jié)點觸發(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);上面代碼中，如果在para節(jié)點的em子節(jié)點上面點擊，則e.target指向em子節(jié)點，導致em子節(jié)點（即World部分）會不可見，且輸出false。
在IE6—IE8之中，該屬性的名字不是target，而是srcElement，因此經(jīng)?？梢钥吹较旅孢@樣的代碼。
function hide(e) {
var target = e.target || e.srcElement;
target.style.visibility = 'hidden';
}type，detail，timeStamp，isTrusted
以下屬性與事件對象的其他信息相關。
（1）type
type屬性返回一個字符串，表示事件類型，具體的值同addEventListener方法和removeEventListener方法的第一個參數(shù)一致，大小寫不敏感。
var string = event.type;
（2）detail
detail屬性返回一個數(shù)值，表示事件的某種信息。具體含義與事件類型有關，對于鼠標事件，表示鼠標按鍵在某個位置按下的次數(shù)，比如對于dblclick事件，detail屬性的值總是2。
function giveDetails(e) {
this.textContent = e.detail;
}
el.onclick = giveDetails;（3）timeStamp
timeStamp屬性返回一個毫秒時間戳，表示事件發(fā)生的時間。
var number = event.timeStamp;
（4）isTrusted
isTrusted屬性返回一個布爾值，表示該事件是否可以信任。
var bool = event.isTrusted;
Firefox瀏覽器中，用戶觸發(fā)的事件會返回true，腳本觸發(fā)的事件返回false；IE瀏覽器中，除了使用createEvent方法生成的事件，所有其他事件都返回true；Chrome瀏覽器不支持該屬性。
preventDefault()
preventDefault方法取消瀏覽器對當前事件的默認行為，比如點擊鏈接后，瀏覽器跳轉(zhuǎn)到指定頁面，或者按一下空格鍵，頁面向下滾動一段距離。該方法生效的前提是，事件的cancelable屬性為true，如果為false，則調(diào)用該方法沒有任何效果。
該方法不會阻止事件的進一步傳播（stopPropagation方法可用于這個目的）。只要在事件的傳播過程中（捕獲階段、目標階段、冒泡階段皆可），使用了preventDefault方法，該事件的默認方法就不會執(zhí)行。
// HTML代碼為
// <input type="checkbox" id="my-checkbox" />
var cb = document.getElementById('my-checkbox');
cb.addEventListener(
'click',
function (e){ e.preventDefault(); },
false
);上面代碼為點擊單選框的事件，設置監(jiān)聽函數(shù)，取消默認行為。由于瀏覽器的默認行為是選中單選框，所以這段代碼會導致無法選中單選框。
利用這個方法，可以為文本輸入框設置校驗條件。如果用戶的輸入不符合條件，就無法將字符輸入文本框。
function checkName(e) {
if (e.charCode < 97 || e.charCode > 122) {
e.preventDefault();
}
}上面函數(shù)設為文本框的keypress監(jiān)聽函數(shù)后，將只能輸入小寫字母，否則輸入事件的默認事件（寫入文本框）將被取消。
如果監(jiān)聽函數(shù)最后返回布爾值false（即return false），瀏覽器也不會觸發(fā)默認行為，與preventDefault方法有等同效果。
stopPropagation()
stopPropagation方法阻止事件在DOM中繼續(xù)傳播，防止再觸發(fā)定義在別的節(jié)點上的監(jiān)聽函數(shù)，但是不包括在當前節(jié)點上新定義的事件監(jiān)聽函數(shù)。
function stopEvent(e) {
e.stopPropagation();
}
el.addEventListener('click', stopEvent, false);將上面函數(shù)指定為監(jiān)聽函數(shù)，會阻止事件進一步冒泡到el節(jié)點的父節(jié)點。
stopImmediatePropagation()
stopImmediatePropagation方法阻止同一個事件的其他監(jiān)聽函數(shù)被調(diào)用。
如果同一個節(jié)點對于同一個事件指定了多個監(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é)點上，為click事件添加了兩個監(jiān)聽函數(shù)l1和l2。由于l1調(diào)用了stopImmediatePropagation方法，所以l2不會被調(diào)用。
鼠標事件
事件種類
鼠標事件指與鼠標相關的事件，主要有以下一些。
（1）click事件
click事件當用戶在Element節(jié)點、document節(jié)點、window對象上，單擊鼠標（或者按下回車鍵）時觸發(fā)?！笆髽藛螕簟倍x為，用戶在同一個位置完成一次mousedown動作和mouseup動作。它們的觸發(fā)順序是：mousedown首先觸發(fā)，mouseup接著觸發(fā)，click最后觸發(fā)。
下面是一個設置click事件監(jiān)聽函數(shù)的例子。
div.addEventListener("click", function( event ) {
// 顯示在該節(jié)點，鼠標連續(xù)點擊的次數(shù)
event.target.innerHTML = "click count: " + event.detail;
}, false);下面的代碼是利用click事件進行CSRF攻擊（Cross-site request forgery）的一個例子。
<a href="http://www.harmless.com/" onclick="
var f = document.createElement('form');
f.style.display = 'none';
this.parentNode.appendChild(f);
f.method = 'POST';
f.action = 'http://www.example.com/account/destroy';
f.submit();
return false;">偽裝的鏈接</a>（2）dblclick事件
dblclick事件當用戶在element、document、window對象上，雙擊鼠標時觸發(fā)。該事件會在mousedown、mouseup、click之后觸發(fā)。
（3）mouseup事件，mousedown事件
mouseup事件在釋放按下的鼠標鍵時觸發(fā)。
mousedown事件在按下鼠標鍵時觸發(fā)。
（4）mousemove事件
mousemove事件當鼠標在一個節(jié)點內(nèi)部移動時觸發(fā)。當鼠標持續(xù)移動時，該事件會連續(xù)觸發(fā)。為了避免性能問題，建議對該事件的監(jiān)聽函數(shù)做一些限定，比如限定一段時間內(nèi)只能運行一次代碼。
（5）mouseover事件，mouseenter事件
mouseover事件和mouseenter事件，都是鼠標進入一個節(jié)點時觸發(fā)。
兩者的區(qū)別是，mouseover事件會冒泡，mouseenter事件不會。子節(jié)點的mouseover事件會冒泡到父節(jié)點，進而觸發(fā)父節(jié)點的mouseover事件。mouseenter事件就沒有這種效果，所以進入子節(jié)點時，不會觸發(fā)父節(jié)點的監(jiān)聽函數(shù)。
下面的例子是mouseenter事件與mouseover事件的區(qū)別。
// HTML代碼為
// <ul id="test">
// <li>item 1</li>
// <li>item 2</li>
// <li>item 3</li>
// </ul>
var test = document.getElementById("test");
// 進入test節(jié)點以后，該事件只會觸發(fā)一次
test.addEventListener("mouseenter", function( event ) {
event.target.style.color = "purple";
setTimeout(function() {
event.target.style.color = "";
}, 500);
}, false);
// 接入test節(jié)點以后，只要在子Element節(jié)點上移動，該事件會觸發(fā)多次
test.addEventListener("mouseover", function( event ) {
event.target.style.color = "orange";
setTimeout(function() {
event.target.style.color = "";
}, 500);
}, false);上面代碼中，由于mouseover事件會冒泡，所以子節(jié)點的mouseover事件會觸發(fā)父節(jié)點的監(jiān)聽函數(shù)。
（6）mouseout事件，mouseleave事件
mouseout事件和mouseleave事件，都是鼠標離開一個節(jié)點時觸發(fā)。
兩者的區(qū)別是，mouseout事件會冒泡，mouseleave事件不會。子節(jié)點的mouseout事件會冒泡到父節(jié)點，進而觸發(fā)父節(jié)點的mouseout事件。mouseleave事件就沒有這種效果，所以離開子節(jié)點時，不會觸發(fā)父節(jié)點的監(jiān)聽函數(shù)。
（7）contextmenu
contextmenu事件在一個節(jié)點上點擊鼠標右鍵時觸發(fā)，或者按下“上下文菜單”鍵時觸發(fā)。
MouseEvent對象
鼠標事件使用MouseEvent對象表示，它繼承UIEvent對象和Event對象。瀏覽器提供一個MouseEvent構(gòu)造函數(shù)，用于新建一個MouseEvent實例。
event = new MouseEvent(typeArg, mouseEventInit);
MouseEvent構(gòu)造函數(shù)的第一個參數(shù)是事件名稱（可能的值包括click、mousedown、mouseup、mouseover、mousemove、mouseout），第二個參數(shù)是一個事件初始化對象。該對象可以配置以下屬性。
screenX，設置鼠標相對于屏幕的水平坐標（但不會移動鼠標），默認為0，等同于MouseEvent.screenX屬性。
screenY，設置鼠標相對于屏幕的垂直坐標，默認為0，等同于MouseEvent.screenY屬性。
clientX，設置鼠標相對于窗口的水平坐標，默認為0，等同于MouseEvent.clientX屬性。
clientY，設置鼠標相對于窗口的垂直坐標，默認為0，等同于MouseEvent.clientY屬性。
ctrlKey，設置是否按下ctrl鍵，默認為false，等同于MouseEvent.ctrlKey屬性。
shiftKey，設置是否按下shift鍵，默認為false，等同于MouseEvent.shiftKey屬性。
altKey，設置是否按下alt鍵，默認為false，等同于MouseEvent.altKey屬性。
metaKey，設置是否按下meta鍵，默認為false，等同于MouseEvent.metaKey屬性。
button，設置按下了哪一個鼠標按鍵，默認為0。-1表示沒有按鍵，0表示按下主鍵（通常是左鍵），1表示按下輔助鍵（通常是中間的鍵），2表示按下次要鍵（通常是右鍵）。
buttons，設置按下了鼠標哪些鍵，是一個3個比特位的二進制值，默認為0。1表示按下主鍵（通常是左鍵），2表示按下次要鍵（通常是右鍵），4表示按下輔助鍵（通常是中間的鍵）。
relatedTarget，設置一個Element節(jié)點，在mouseenter和mouseover事件時，表示鼠標剛剛離開的那個Element節(jié)點，在mouseout和mouseleave事件時，表示鼠標正在進入的那個Element節(jié)點。默認為null，等同于MouseEvent.relatedTarget屬性。
以下屬性也是可配置的，都繼承自UIEvent構(gòu)造函數(shù)和Event構(gòu)造函數(shù)。
bubbles，布爾值，設置事件是否冒泡，默認為false，等同于Event.bubbles屬性。
cancelable，布爾值，設置事件是否可取消，默認為false，等同于Event.cancelable屬性。
view，設置事件的視圖，一般是window或document.defaultView，等同于Event.view屬性。
detail，設置鼠標點擊的次數(shù)，等同于Event.detail屬性。
下面是一個例子。
function simulateClick() {
var event = new MouseEvent('click', {
'bubbles': true,
'cancelable': true
});
var cb = document.getElementById('checkbox');
cb.dispatchEvent(event);
}上面代碼生成一個鼠標點擊事件，并觸發(fā)該事件。
以下介紹MouseEvent實例的屬性。
altKey，ctrlKey，metaKey，shiftKey
以下屬性返回一個布爾值，表示鼠標事件發(fā)生時，是否按下某個鍵。
altKey屬性：alt鍵
ctrlKey屬性：key鍵
metaKey屬性：Meta鍵（Mac鍵盤是一個四瓣的小花，Windows鍵盤是Windows鍵）
shiftKey屬性：Shift鍵
// HTML代碼為
// <body onclick="showkey(event);">
function showKey(e){
console.log("ALT key pressed: " + e.altKey);
console.log("CTRL key pressed: " + e.ctrlKey);
console.log("META key pressed: " + e.metaKey);
console.log("META key pressed: " + e.shiftKey);
}上面代碼中，點擊網(wǎng)頁會輸出是否同時按下Alt鍵。
button，buttons
以下屬性返回事件的鼠標鍵信息。
（1）button
button屬性返回一個數(shù)值，表示按下了鼠標哪個鍵。
-1：沒有按下鍵。
0：按下主鍵（通常是左鍵）。
1：按下輔助鍵（通常是中鍵或者滾輪鍵）。
2：按下次鍵（通常是右鍵）。
// HTML代碼為
// <button onmouseup="whichButton(event);">點擊</button>
var whichButton = function (e) {
switch (e.button) {
case 0:
console.log('Left button clicked.');
break;
case 1:
console.log('Middle button clicked.');
break;
case 2:
console.log('Right button clicked.');
break;
default:
console.log('Unexpected code: ' + e.button);
}
}（2）buttons
buttons屬性返回一個3個比特位的值，表示同時按下了哪些鍵。它用來處理同時按下多個鼠標鍵的情況。
1：二進制為001，表示按下左鍵。
2：二進制為010，表示按下右鍵。
4：二進制為100，表示按下中鍵或滾輪鍵。
同時按下多個鍵的時候，每個按下的鍵對應的比特位都會有值。比如，同時按下左鍵和右鍵，會返回3（二進制為011）。
clientX，clientY，movementX，movementY，screenX，screenY
以下屬性與事件的位置相關。
（1）clientX，clientY
clientX屬性返回鼠標位置相對于瀏覽器窗口左上角的水平坐標，單位為像素，與頁面是否橫向滾動無關。
clientY屬性返回鼠標位置相對于瀏覽器窗口左上角的垂直坐標，單位為像素，與頁面是否縱向滾動無關。
// HTML代碼為
// <body onmousedown="showCoords(event)">
function showCoords(evt){
console.log(
"clientX value: " + evt.clientX + "\n" +
"clientY value: " + evt.clientY + "\n"
);
}（2）movementX，movementY
movementX屬性返回一個水平位移，單位為像素，表示當前位置與上一個mousemove事件之間的水平距離。在數(shù)值上，等于currentEvent.movementX = currentEvent.screenX - previousEvent.screenX。
movementY屬性返回一個垂直位移，單位為像素，表示當前位置與上一個mousemove事件之間的垂直距離。在數(shù)值上，等于currentEvent.movementY = currentEvent.screenY - previousEvent.screenY。
（3）screenX，screenY
screenX屬性返回鼠標位置相對于屏幕左上角的水平坐標，單位為像素。
screenY屬性返回鼠標位置相對于屏幕左上角的垂直坐標，單位為像素。
// HTML代碼為
// <body onmousedown="showCoords(event)">
function showCoords(evt){
console.log(
"screenX value: " + evt.screenX + "\n"
+ "screenY value: " + evt.screenY + "\n"
);
}relatedTarget
relatedTarget屬性返回事件的次要相關節(jié)點。對于那些沒有次要相關節(jié)點的事件，該屬性返回null。
下表列出不同事件的target屬性和relatedTarget屬性含義。
| 事件名稱 | target屬性 | relatedTarget屬性 |
|---|---|---|
| focusin | 接受焦點的節(jié)點 | 喪失焦點的節(jié)點 |
| focusout | 喪失焦點的節(jié)點 | 接受焦點的節(jié)點 |
| mouseenter | 將要進入的節(jié)點 | 將要離開的節(jié)點 |
| mouseleave | 將要離開的節(jié)點 | 將要進入的節(jié)點 |
| mouseout | 將要離開的節(jié)點 | 將要進入的節(jié)點 |
| mouseover | 將要進入的節(jié)點 | 將要離開的節(jié)點 |
| dragenter | 將要進入的節(jié)點 | 將要離開的節(jié)點 |
| dragexit | 將要離開的節(jié)點 | 將要進入的節(jié)點 |
下面是一個例子。
// HTML代碼為
// <div id="outer" style="height:50px;width:50px;border-width:1px solid black;">
// <div id="inner" style="height:25px;width:25px;border:1px solid black;"></div>
// </div>
var inner = document.getElementById("inner");
inner.addEventListener("mouseover", function (){
console.log('進入' + event.target.id + " 離開" + event.relatedTarget.id);
});
inner.addEventListener("mouseenter", function (){
console.log('進入' + event.target.id + " 離開" + event.relatedTarget.id);
});
inner.addEventListener("mouseout", function (){
console.log('離開' + event.target.id + " 進入" + event.relatedTarget.id);
});
inner.addEventListener("mouseleave", function (){
console.log('離開' + event.target.id + " 進入" + event.relatedTarget.id);
});
// 鼠標從outer進入inner，輸出
// 進入inner 離開outer
// 進入inner 離開outer
// 鼠標從inner進入outer，輸出
// 離開inner 進入outer
// 離開inner 進入outer
wheel事件是與鼠標滾輪相關的事件，目前只有一個wheel事件。用戶滾動鼠標的滾輪，就觸發(fā)這個事件。
該事件除了繼承了MouseEvent、UIEvent、Event的屬性，還有幾個自己的屬性。
deltaX：返回一個數(shù)值，表示滾輪的水平滾動量。
deltaY：返回一個數(shù)值，表示滾輪的垂直滾動量。
deltaZ：返回一個數(shù)值，表示滾輪的Z軸滾動量。
deltaMode：返回一個數(shù)值，表示滾動的單位，適用于上面三個屬性。0表示像素，1表示行，2表示頁。
瀏覽器提供一個WheelEvent構(gòu)造函數(shù)，可以用來生成滾輪事件的實例。它接受兩個參數(shù)，第一個是事件名稱，第二個是配置對象。
var syntheticEvent = new WheelEvent("syntheticWheel", {"deltaX": 4, "deltaMode": 0});鍵盤事件
鍵盤事件用來描述鍵盤行為，主要有keydown、keypress、keyup三個事件。
keydown：按下鍵盤時觸發(fā)該事件。
keypress：只要按下的鍵并非Ctrl、Alt、Shift和Meta，就接著觸發(fā)keypress事件。
keyup：松開鍵盤時觸發(fā)該事件。
下面是一個例子，對文本框設置keypress監(jiān)聽函數(shù)，只允許輸入數(shù)字。
// HTML代碼為
// <input type="text"
// name="myInput"
// onkeypress="return numbersOnly(this, event);"
// onpaste="return false;"
// />
function numbersOnly(oToCheckField, oKeyEvent) {
return oKeyEvent.charCode === 0
|| /\d/.test(String.fromCharCode(oKeyEvent.charCode));
}如果用戶一直按鍵不松開，就會連續(xù)觸發(fā)鍵盤事件，觸發(fā)的順序如下。
keydown
keypress
keydown
keypress
（重復以上過程）
keyup
鍵盤事件使用KeyboardEvent對象表示，該對象繼承了UIEvent和MouseEvent對象。瀏覽器提供KeyboardEvent構(gòu)造函數(shù)，用來新建鍵盤事件的實例。
event = new KeyboardEvent(typeArg, KeyboardEventInit);
KeyboardEvent構(gòu)造函數(shù)的第一個參數(shù)是一個字符串，表示事件類型，第二個參數(shù)是一個事件配置對象，可配置以下字段。
key，對應KeyboardEvent.key屬性，默認為空字符串。
ctrlKey，對應KeyboardEvent.ctrlKey屬性，默認為false。
shiftKey，對應KeyboardEvent.shiftKey屬性，默認為false。
altKey，對應KeyboardEvent.altKey屬性，默認為false。
metaKey，對應KeyboardEvent.metaKey屬性，默認為false。
下面就是KeyboardEvent實例的屬性介紹。
altKey，ctrlKey，metaKey，shiftKey
以下屬性返回一個布爾值，表示是否按下對應的鍵。
altKey：alt鍵
ctrlKey：ctrl鍵
metaKey：meta鍵（mac系統(tǒng)是一個四瓣的小花，windows系統(tǒng)是windows鍵）
shiftKey：shift鍵
function showChar(e){
console.log("ALT: " + e.altKey);
console.log("CTRL: " + e.ctrlKey);
console.log("Meta: " + e.metaKey);
console.log("Meta: " + e.shiftKey);
}key，charCode
key屬性返回一個字符串，表示按下的鍵名。如果同時按下一個控制鍵和一個符號鍵，則返回符號鍵的鍵名。比如，按下Ctrl+a，則返回a。如果無法識別鍵名，則返回字符串Unidentified。
主要功能鍵的鍵名（不同的瀏覽器可能有差異）：Backspace，Tab，Enter，Shift，Control，Alt，CapsLock，CapsLock，Esc，Spacebar，PageUp，PageDown，End，Home，Left，Right，Up，Down，PrintScreen，Insert，Del，Win，F(xiàn)1～F12，NumLock，Scroll等。
charCode屬性返回一個數(shù)值，表示keypress事件按鍵的Unicode值，keydown和keyup事件不提供這個屬性。注意，該屬性已經(jīng)從標準移除，雖然瀏覽器還支持，但應該盡量不使用。
進度事件
進度事件用來描述一個事件進展的過程，比如XMLHttpRequest對象發(fā)出的HTTP請求的過程、、、、、加載外部資源的過程。下載和上傳都會發(fā)生進度事件。
進度事件有以下幾種。
abort事件：當進度事件被中止時觸發(fā)。如果發(fā)生錯誤，導致進程中止，不會觸發(fā)該事件。
error事件：由于錯誤導致資源無法加載時觸發(fā)。
load事件：進度成功結(jié)束時觸發(fā)。
loadstart事件：進度開始時觸發(fā)。
loadend事件：進度停止時觸發(fā)，發(fā)生順序排在error事件\abort事件\load事件后面。
progress事件：當操作處于進度之中，由傳輸?shù)臄?shù)據(jù)塊不斷觸發(fā)。
timeout事件：進度超過限時觸發(fā)。
image.addEventListener('load', function(event) {
image.classList.add('finished');
});
image.addEventListener('error', function(event) {
image.style.display = 'none';
});上面代碼在圖片元素加載完成后，為圖片元素的class屬性添加一個值“finished”。如果加載失敗，就把圖片元素的樣式設置為不顯示。
有時候，圖片加載會在腳本運行之前就完成，尤其是當腳本放置在網(wǎng)頁底部的時候，因此有可能使得load和error事件的監(jiān)聽函數(shù)根本不會被執(zhí)行。所以，比較可靠的方式，是用complete屬性先判斷一下是否加載完成。
function loaded() {
// code after image loaded
}
if (image.complete) {
loaded();
} else {
image.addEventListener('load', loaded);
}由于DOM沒有提供像complete屬性那樣的，判斷是否發(fā)生加載錯誤的屬性，所以error事件的監(jiān)聽函數(shù)最好放在img元素的HTML屬性中，這樣才能保證發(fā)生加載錯誤時百分之百會執(zhí)行。
<img src="/wrong/url" onerror="this.style.display='none';" />
error事件有一個特殊的性質(zhì)，就是不會冒泡。這樣的設計是正確的，防止引發(fā)父元素的error事件監(jiān)聽函數(shù)。
進度事件使用ProgressEvent對象表示。ProgressEvent實例有以下屬性。
lengthComputable：返回一個布爾值，表示當前進度是否具有可計算的長度。如果為false，就表示當前進度無法測量。
total：返回一個數(shù)值，表示當前進度的總長度。如果是通過HTTP下載某個資源，表示內(nèi)容本身的長度，不含HTTP頭部的長度。如果lengthComputable屬性為false，則total屬性就無法取得正確的值。
loaded：返回一個數(shù)值，表示當前進度已經(jīng)完成的數(shù)量。該屬性除以total屬性，就可以得到目前進度的百分比。
下面是一個例子。
var xhr = new XMLHttpRequest();
xhr.addEventListener("progress", updateProgress, false);
xhr.addEventListener("load", transferComplete, false);
xhr.addEventListener("error", transferFailed, false);
xhr.addEventListener("abort", transferCanceled, false);
xhr.open();
function updateProgress (e) {
if (e.lengthComputable) {
var percentComplete = e.loaded / e.total;
} else {
console.log('不能計算進度');
}
}
function transferComplete(e) {
console.log('傳輸結(jié)束');
}
function transferFailed(evt) {
console.log('傳輸過程中發(fā)生錯誤');
}
function transferCanceled(evt) {
console.log('用戶取消了傳輸');
}loadend事件的監(jiān)聽函數(shù)，可以用來取代abort事件/load事件/error事件的監(jiān)聽函數(shù)。
req.addEventListener("loadend", loadEnd, false);
function loadEnd(e) {
console.log('傳輸結(jié)束，成功失敗未知');
}loadend事件本身不提供關于進度結(jié)束的原因，但可以用它來做所有進度結(jié)束場景都需要做的一些操作。
另外，上面是下載過程的進度事件，還存在上傳過程的進度事件。這時所有監(jiān)聽函數(shù)都要放在XMLHttpRequest.upload對象上面。
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", updateProgress, false);
xhr.upload.addEventListener("load", transferComplete, false);
xhr.upload.addEventListener("error", transferFailed, false);
xhr.upload.addEventListener("abort", transferCanceled, false);
xhr.open();瀏覽器提供一個ProgressEvent構(gòu)造函數(shù)，用來生成進度事件的實例。
progressEvent = new ProgressEvent(type, {
lengthComputable: aBooleanValue,
loaded: aNumber,
total: aNumber
});上面代碼中，ProgressEvent構(gòu)造函數(shù)的第一個參數(shù)是事件類型（字符串），第二個參數(shù)是配置對象，用來指定lengthComputable屬性（默認值為false）、loaded屬性（默認值為0）、total屬性（默認值為0）。
拖拉事件
拖拉指的是，用戶在某個對象上按下鼠標鍵不放，拖動它到另一個位置，然后釋放鼠標鍵，將該對象放在那里。
拖拉的對象有好幾種，包括Element節(jié)點、圖片、鏈接、選中的文字等等。在HTML網(wǎng)頁中，除了Element節(jié)點默認不可以拖拉，其他（圖片、鏈接、選中的文字）都是可以直接拖拉的。為了讓Element節(jié)點可拖拉，可以將該節(jié)點的draggable屬性設為true。
<div draggable="true"> 此區(qū)域可拖拉 </div>
draggable屬性可用于任何Element節(jié)點，但是圖片（img元素）和鏈接（a元素）不加這個屬性，就可以拖拉。對于它們，用到這個屬性的時候，往往是將其設為false，防止拖拉。
注意，一旦某個Element節(jié)點的draggable屬性設為true，就無法再用鼠標選中該節(jié)點內(nèi)部的文字或子節(jié)點了。
事件種類
當Element節(jié)點或選中的文本被拖拉時，就會持續(xù)觸發(fā)拖拉事件，包括以下一些事件。
drag事件：拖拉過程中，在被拖拉的節(jié)點上持續(xù)觸發(fā)。
dragstart事件：拖拉開始時在被拖拉的節(jié)點上觸發(fā)，該事件的target屬性是被拖拉的節(jié)點。通常應該在這個事件的監(jiān)聽函數(shù)中，指定拖拉的數(shù)據(jù)。
dragend事件：拖拉結(jié)束時（釋放鼠標鍵或按下escape鍵）在被拖拉的節(jié)點上觸發(fā)，該事件的target屬性是被拖拉的節(jié)點。它與dragStart事件，在同一個節(jié)點上觸發(fā)。不管拖拉是否跨窗口，或者中途被取消，dragend事件總是會觸發(fā)的。
dragenter事件：拖拉進入當前節(jié)點時，在當前節(jié)點上觸發(fā)，該事件的target屬性是當前節(jié)點。通常應該在這個事件的監(jiān)聽函數(shù)中，指定是否允許在當前節(jié)點放下（drop）拖拉的數(shù)據(jù)。如果當前節(jié)點沒有該事件的監(jiān)聽函數(shù)，或者監(jiān)聽函數(shù)不執(zhí)行任何操作，就意味著不允許在當前節(jié)點放下數(shù)據(jù)。在視覺上顯示拖拉進入當前節(jié)點，也是在這個事件的監(jiān)聽函數(shù)中設置。
dragover事件：拖拉到當前節(jié)點上方時，在當前節(jié)點上持續(xù)觸發(fā)，該事件的target屬性是當前節(jié)點。該事件與dragenter事件基本類似，默認會重置當前的拖拉事件的效果（DataTransfer對象的dropEffect屬性）為none，即不允許放下被拖拉的節(jié)點，所以如果允許在當前節(jié)點drop數(shù)據(jù)，通常會使用preventDefault方法，取消重置拖拉效果為none。
dragleave事件：拖拉離開當前節(jié)點范圍時，在當前節(jié)點上觸發(fā)，該事件的target屬性是當前節(jié)點。在視覺上顯示拖拉離開當前節(jié)點，就在這個事件的監(jiān)聽函數(shù)中設置。
drop事件：被拖拉的節(jié)點或選中的文本，釋放到目標節(jié)點時，在目標節(jié)點上觸發(fā)。注意，如果當前節(jié)點不允許drop，即使在該節(jié)點上方松開鼠標鍵，也不會觸發(fā)該事件。如果用戶按下Escape鍵，取消這個操作，也不會觸發(fā)該事件。該事件的監(jiān)聽函數(shù)負責取出拖拉數(shù)據(jù)，并進行相關處理。
關于拖拉事件，有以下幾點注意事項。
拖拉過程只觸發(fā)以上這些拖拉事件，盡管鼠標在移動，但是鼠標事件不會觸發(fā)。
將文件從操作系統(tǒng)拖拉進瀏覽器，不會觸發(fā)dragStart和dragend事件。
dragenter和dragover事件的監(jiān)聽函數(shù)，用來指定可以放下（drop）拖拉的數(shù)據(jù)。由于網(wǎng)頁的大部分區(qū)域不適合作為drop的目標節(jié)點，所以這兩個事件的默認設置為當前節(jié)點不允許drop。如果想要在目標節(jié)點上drop拖拉的數(shù)據(jù)，首先必須阻止這兩個事件的默認行為，或者取消這兩個事件。
<div ondragover="return false"> <div ondragover="event.preventDefault()">
上面代碼中，如果不取消拖拉事件或者阻止默認行為，就不可能在div節(jié)點上drop被拖拉的節(jié)點。
拖拉事件用一個DragEvent對象表示，該對象繼承MouseEvent對象，因此也就繼承了UIEvent和Event對象。DragEvent對象只有一個獨有的屬性DataTransfer，其他都是繼承的屬性。DataTransfer屬性用來讀寫拖拉事件中傳輸?shù)臄?shù)據(jù)，詳見下文《DataTransfer對象》的部分。
下面的例子展示，如何動態(tài)改變被拖動節(jié)點的背景色。
div.addEventListener("dragstart", function(e) { this.style.backgroundColor = "red";
}, false);
div.addEventListener("dragend", function(e) { this.style.backgroundColor = "green";
}, false);上面代碼中，div節(jié)點被拖動時，背景色會變?yōu)榧t色，拖動結(jié)束，又變回綠色。
下面是一個例子，顯示如何實現(xiàn)將一個節(jié)點從當前父節(jié)點，拖拉到另一個父節(jié)點中。
// HTML代碼為
// <div class="dropzone">
// <div id="draggable" draggable="true">
// 該節(jié)點可拖拉
// </div>
// </div>
// <div class="dropzone"></div>
// <div class="dropzone"></div>
// <div class="dropzone"></div>
// 被拖拉節(jié)點
var dragged;
document.addEventListener("dragstart", function( event ) {
// 保存被拖拉節(jié)點
dragged = event.target;
// 被拖拉節(jié)點的背景色變透明
event.target.style.opacity = .5;
}, false);
document.addEventListener("dragend", function( event ) {
// 被拖拉節(jié)點的背景色恢復正常
event.target.style.opacity = "";
}, false);
document.addEventListener("dragover", function( event ) {
// 防止拖拉效果被重置，允許被拖拉的節(jié)點放入目標節(jié)點
event.preventDefault();
}, false);
document.addEventListener("dragenter", function( event ) {
// 目標節(jié)點的背景色變紫色
// 由于該事件會冒泡，所以要過濾節(jié)點
if ( event.target.className == "dropzone" ) {
event.target.style.background = "purple";
}
}, false);
document.addEventListener("dragleave", function( event ) {
// 目標節(jié)點的背景色恢復原樣
if ( event.target.className == "dropzone" ) {
event.target.style.background = "";
}
}, false);
document.addEventListener("drop", function( event ) {
// 防止事件默認行為（比如某些Elment節(jié)點上可以打開鏈接）
event.preventDefault();
if ( event.target.className == "dropzone" ) {
// 恢復目標節(jié)點背景色
event.target.style.background = "";
// 將被拖拉節(jié)點插入目標節(jié)點
dragged.parentNode.removeChild( dragged );
event.target.appendChild( dragged );
}
}, false);DataTransfer對象概述
所有的拖拉事件都有一個dataTransfer屬性，用來保存需要傳遞的數(shù)據(jù)。這個屬性的值是一個DataTransfer對象。
拖拉的數(shù)據(jù)保存兩方面的數(shù)據(jù)：數(shù)據(jù)的種類（又稱格式）和數(shù)據(jù)的值。數(shù)據(jù)的種類是一個MIME字符串，比如 text/plain或者image/jpeg，數(shù)據(jù)的值是一個字符串。一般來說，如果拖拉一段文本，則數(shù)據(jù)默認就是那段文本；如果拖拉一個鏈接，則數(shù)據(jù)默認就是鏈接的URL。
當拖拉事件開始的時候，可以提供數(shù)據(jù)類型和數(shù)據(jù)值；在拖拉過程中，通過dragenter和dragover事件的監(jiān)聽函數(shù)，檢查數(shù)據(jù)類型，以確定是否允許放下（drop）被拖拉的對象。比如，在只允許放下鏈接的區(qū)域，檢查拖拉的數(shù)據(jù)類型是否為text/uri-list。
發(fā)生drop事件時，監(jiān)聽函數(shù)取出拖拉的數(shù)據(jù)，對其進行處理。
DataTransfer對象的屬性
DataTransfer對象有以下屬性。
（1）dropEffect
dropEffect屬性設置放下（drop）被拖拉節(jié)點時的效果，可能的值包括copy（復制被拖拉的節(jié)點）、move（移動被拖拉的節(jié)點）、link（創(chuàng)建指向被拖拉的節(jié)點的鏈接）、none（無法放下被拖拉的節(jié)點）。設置除此以外的值，都是無效的。
target.addEventListener('dragover', function(e) {
e.preventDefault();
e.stopPropagation();
e.dataTransfer.dropEffect = 'copy';
});dropEffect屬性一般在dragenter和dragove事件的監(jiān)聽函數(shù)中設置，對于dragstart、drag、dragleave這三個事件，該屬性不起作用。進入目標節(jié)點后，拖拉行為會初始化成用戶設定的效果，用戶可以通過按下Shift鍵和Control鍵，改變初始設置，在copy、move、link三種效果中切換。
鼠標箭頭會根據(jù)dropEffect屬性改變形狀，提示目前正處于哪一種效果。這意味著，通過鼠標就能判斷是否可以在當前節(jié)點drop被拖拉的節(jié)點。
（2）effectAllowed
effectAllowed屬性設置本次拖拉中允許的效果，可能的值包括copy（復制被拖拉的節(jié)點）、move（移動被拖拉的節(jié)點）、link（創(chuàng)建指向被拖拉節(jié)點的鏈接）、copyLink（允許copy或link）、copyMove（允許copy或move）、linkMove（允許link或move）、all（允許所有效果）、none（無法放下被拖拉的節(jié)點）、uninitialized（默認值，等同于all）。如果某種效果是不允許的，用戶就無法在目標節(jié)點中達成這種效果。
dragstart事件的監(jiān)聽函數(shù)，可以設置被拖拉節(jié)點允許的效果；dragenter和dragover事件的監(jiān)聽函數(shù)，可以設置目標節(jié)點允許的效果。
event.dataTransfer.effectAllowed = "copy";
dropEffect屬性和effectAllowed屬性，往往配合使用。
event.dataTransfer.effectAllowed = "copyMove"; event.dataTransfer.dropEffect = "copy";
上面代碼中，copy是指定的效果，但是可以通過Shift或Ctrl鍵（根據(jù)平臺而定），將效果切換成move。
只要dropEffect屬性和effectAllowed屬性之中，有一個為none，就無法在目標節(jié)點上完成drop操作。
（3）files
files屬性是一個FileList對象，包含一組本地文件，可以用來在拖拉操作中傳送。如果本次拖拉不涉及文件，則屬性為空的FileList對象。
下面就是一個接收拖拉文件的例子。
// HTML代碼為
// <div id="output" style="min-height: 200px;border: 1px solid black;">
// 文件拖拉到這里
// </div>
var div = document.getElementById('output');
div.addEventListener("dragenter", function( event ) {
div.textContent = '';
event.stopPropagation();
event.preventDefault();
}, false);
div.addEventListener("dragover", function( event ) {
event.stopPropagation();
event.preventDefault();
}, false);
div.addEventListener("drop", function( event ) {
event.stopPropagation();
event.preventDefault();
var files = event.dataTransfer.files;
for (var i = 0; i < files.length; i++) {
div.textContent += files[i].name + ' ' + files[i].size + '字節(jié)\n';
}
}, false);上面代碼中，通過files屬性讀取拖拉文件的信息。如果想要讀取文件內(nèi)容，就要使用FileReader對象。
div.addEventListener('drop', function(e) {
e.preventDefault();
e.stopPropagation();
var fileList = e.dataTransfer.files;
if (fileList.length > 0) {
var file = fileList[0];
var reader = new FileReader();
reader.onloadend = function(e) {
if (e.target.readyState == FileReader.DONE) {
var content = reader.result;
contentDiv.innerHTML = "File: " + file.name + "\n\n" + content;
}
}
reader.readAsBinaryString(file);
}
});（4）types
types屬性是一個數(shù)組，保存每一次拖拉的數(shù)據(jù)格式，比如拖拉文件，則格式信息就為File。
下面是一個例子，通過檢查dataTransfer屬性的類型，決定是否允許在當前節(jié)點執(zhí)行drop操作。
function contains(list, value){
for( var i = 0; i < list.length; ++i ){
if(list[i] === value) return true;
}
return false;
}
function doDragOver(event){
var isLink = contains( event.dataTransfer.types, "text/uri-list");
if (isLink) event.preventDefault();
}上面代碼中，只有當被拖拉的節(jié)點是一個鏈接時，才允許在當前節(jié)點放下。
DataTransfer對象的方法
DataTransfer對象有以下方法。
（1）setData()
setData方法用來設置事件所帶有的指定類型的數(shù)據(jù)。它接受兩個參數(shù)，第一個是數(shù)據(jù)類型，第二個是具體數(shù)據(jù)。如果指定的類型在現(xiàn)有數(shù)據(jù)中不存在，則該類型將寫入types屬性；如果已經(jīng)存在，在該類型的現(xiàn)有數(shù)據(jù)將被替換。
event.dataTransfer.setData("text/plain", "Text to drag");上面代碼為事件加入純文本格式的數(shù)據(jù)。
如果拖拉文本框或者拖拉選中的文本，會默認將文本數(shù)據(jù)添加到dataTransfer屬性，不用手動指定。
<div draggable="true" ondragstart="
event.dataTransfer.setData('text/plain', 'bbb')">
aaa
</div>上面代碼中，拖拉數(shù)據(jù)實際上是bbb，而不是aaa。
下面是添加其他類型的數(shù)據(jù)。由于text/plain是最普遍支持的格式，為了保證兼容性，建議最后總是將數(shù)據(jù)保存一份純文本的格式。
var dt = event.dataTransfer;
// 添加鏈接
dt.setData("text/uri-list", "http://www.example.com");
dt.setData("text/plain", "http://www.example.com");
// 添加HTML代碼
dt.setData("text/html", "Hello there, <strong>stranger</strong>");
dt.setData("text/plain", "Hello there, <strong>stranger</strong>");
// 添加圖像的URL
dt.setData("text/uri-list", imageurl);
dt.setData("text/plain", imageurl);可以一次提供多種格式的數(shù)據(jù)。
var dt = event.dataTransfer;
dt.setData("application/x-bookmark", bookmarkString);
dt.setData("text/uri-list", "http://www.example.com");
dt.setData("text/plain", "http://www.example.com");
取，這意味著，只有某個部署了特定代碼的節(jié)點，才可能drop（讀取到）這個數(shù)據(jù)。
（2）getData()
getData方法接受一個字符串（表示數(shù)據(jù)類型）作為參數(shù)，返回事件所帶的指定類型的數(shù)據(jù)（通常是用setData方法添加的數(shù)據(jù)）。如果指定類型的數(shù)據(jù)不存在，則返回空字符串。通常只有drop事件觸發(fā)后，才能取出數(shù)據(jù)。如果取出另一個域名存放的數(shù)據(jù)，將會報錯。
下面是一個drop事件的監(jiān)聽函數(shù)，用來取出指定類型的數(shù)據(jù)。
function onDrop(event){
var data = event.dataTransfer.getData("text/plain");
event.target.textContent = data;
event.preventDefault();
}上面代碼取出拖拉事件的文本數(shù)據(jù)，將其替換成當前節(jié)點的文本內(nèi)容。注意，這時還必須取消瀏覽器的默認行為，因為假如用戶拖拉的是一個鏈接，瀏覽器默認會在當前窗口打開這個鏈接。
getData方法返回的是一個字符串，如果其中包含多項數(shù)據(jù)，就必須手動解析。
function doDrop(event){
var lines = event.dataTransfer.getData("text/uri-list").split("\n");
for (let line of lines) {
let link = document.createElement("a");
link.href = line;
link.textContent = line;
event.target.appendChild(link);
}
event.preventDefault();
}上面代碼中，getData方法返回的是一組鏈接，就必須自行解析。
類型值指定為URL，可以取出第一個有效鏈接。
var link = event.dataTransfer.getData("URL");下面是一次性取出多種類型的數(shù)據(jù)。
function doDrop(event){
var types = event.dataTransfer.types;
var supportedTypes = ["text/uri-list", "text/plain"];
types = supportedTypes.filter(function (value) types.includes(value));
if (types.length)
var data = event.dataTransfer.getData(types[0]);
event.preventDefault();
}（3）clearData()
clearData方法接受一個字符串（表示數(shù)據(jù)類型）作為參數(shù)，刪除事件所帶的指定類型的數(shù)據(jù)。如果沒有指定類型，則刪除所有數(shù)據(jù)。如果指定類型不存在，則原數(shù)據(jù)不受影響。
event.dataTransfer.clearData("text/uri-list");上面代碼清除事件所帶的URL數(shù)據(jù)。
（4）setDragImage()
拖動過程中（dragstart事件觸發(fā)后），瀏覽器會顯示一張圖片跟隨鼠標一起移動，表示被拖動的節(jié)點。這張圖片是自動創(chuàng)造的，通常顯示為被拖動節(jié)點的外觀，不需要自己動手設置。setDragImage方法可以用來自定義這張圖片，它接受三個參數(shù)，第一個是img圖片元素或者canvas元素，如果省略或為null則使用被拖動的節(jié)點的外觀，第二個和第三個參數(shù)為鼠標相對于該圖片左上角的橫坐標和右坐標。
下面是一個例子。
// HTML代碼為
// <div id="drag-with-image" class="dragdemo" draggable="true">
drag me
// </div>
var div = document.getElementById("drag-with-image");
div.addEventListener("dragstart", function(e) {
var img = document.createElement("img");
img.src = "http://path/to/img";
e.dataTransfer.setDragImage(img, 0, 0);
}, false);觸摸事件
觸摸API由三個對象組成。
Touch
TouchList
TouchEvent
Touch對象表示觸摸點（一根手指或者一根觸摸筆），用來描述觸摸動作，包括位置、大小、形狀、壓力、目標元素等屬性。有時，觸摸動作由多個觸摸點（多根手指或者多根觸摸筆）組成，多個觸摸點的集合由TouchList對象表示。TouchEvent對象代表由觸摸引發(fā)的事件，只有觸摸屏才會引發(fā)這一類事件。
很多時候，觸摸事件和鼠標事件同時觸發(fā)，即使這個時候并沒有用到鼠標。這是為了讓那些只定義鼠標事件、沒有定義觸摸事件的代碼，在觸摸屏的情況下仍然能用。如果想避免這種情況，可以用preventDefault方法阻止發(fā)出鼠標事件。
Touch對象
Touch對象代表一個觸摸點。觸摸點可能是一根手指，也可能是一根觸摸筆。它有以下屬性。
（1）identifier
identifier屬性表示Touch實例的獨一無二的識別符。它在整個觸摸過程中保持不變。
var id = touchItem.identifier;
TouchList對象的identifiedTouch方法，可以根據(jù)這個屬性，從一個集合里面取出對應的Touch對象。
（2）screenX，screenY，clientX，clientY，pageX，pageY
screenX屬性和screenY屬性，分別表示觸摸點相對于屏幕左上角的橫坐標和縱坐標，與頁面是否滾動無關。
clientX屬性和clientY屬性，分別表示觸摸點相對于瀏覽器視口左上角的橫坐標和縱坐標，與頁面是否滾動無關。
pageX屬性和pageY屬性，分別表示觸摸點相對于當前頁面左上角的橫坐標和縱坐標，包含了頁面滾動帶來的位移。
（3）radiusX，radiusY，rotationAngle
radiusX屬性和radiusY屬性，分別返回觸摸點周圍受到影響的橢圓范圍的X軸和Y軸，單位為像素。
rotationAngle屬性表示觸摸區(qū)域的橢圓的旋轉(zhuǎn)角度，單位為度數(shù)，在0到90度之間。
上面這三個屬性共同定義了用戶與屏幕接觸的區(qū)域，對于描述手指這一類非精確的觸摸，很有幫助。指尖接觸屏幕，觸摸范圍會形成一個橢圓，這三個屬性就用來描述這個橢圓區(qū)域。
（4）force
force屬性返回一個0到1之間的數(shù)值，表示觸摸壓力。0代表沒有壓力，1代表硬件所能識別的最大壓力。
（5）target
target屬性返回一個Element節(jié)點，代表觸摸發(fā)生的那個節(jié)點。
TouchList對象
TouchList對象是一個類似數(shù)組的對象，成員是與某個觸摸事件相關的所有觸摸點。比如，用戶用三根手指觸摸，產(chǎn)生的TouchList對象就有三個成員，每根手指對應一個Touch對象。
TouchList實例的length屬性，返回TouchList對象的成員數(shù)量。
TouchList實例的identifiedTouch方法和item方法，分別使用id屬性和索引值（從0開始）作為參數(shù)，取出指定的Touch對象。
TouchEvent對象
TouchEvent對象繼承Event對象和UIEvent對象，表示觸摸引發(fā)的事件。除了被繼承的屬性以外，它還有一些自己的屬性。
（1）鍵盤相關屬性
以下屬性都為只讀屬性，返回一個布爾值，表示觸摸的同時，是否按下某個鍵。
altKey 是否按下alt鍵
ctrlKey 是否按下ctrl鍵
metaKey 是否按下meta鍵
shiftKey 是否按下shift鍵
（2）changedTouches
changedTouches屬性返回一個TouchList對象，包含了由當前觸摸事件引發(fā)的所有Touch對象（即相關的觸摸點）。
對于touchstart事件，它代表被激活的觸摸點；對于touchmove事件，代表發(fā)生變化的觸摸點；對于touchend事件，代表消失的觸摸點（即不再被觸碰的點）。
var touches = touchEvent.changedTouches;
（3）targetTouches
targetTouches屬性返回一個TouchList對象，包含了觸摸的目標Element節(jié)點內(nèi)部，所有仍然處于活動狀態(tài)的觸摸點。
var touches = touchEvent.targetTouches;
（4）touches
touches屬性返回一個TouchList對象，包含了所有仍然處于活動狀態(tài)的觸摸點。
var touches = touchEvent.touches;
觸摸事件的種類
觸摸引發(fā)的事件，有以下幾類。可以通過TouchEvent.type屬性，查看到底發(fā)生的是哪一種事件。
touchstart：用戶接觸觸摸屏時觸發(fā)，它的target屬性返回發(fā)生觸摸的Element節(jié)點。
touchend：用戶不再接觸觸摸屏時（或者移出屏幕邊緣時）觸發(fā)，它的target屬性與touchstart事件的target屬性是一致的，它的changedTouches屬性返回一個TouchList對象，包含所有不再觸摸的觸摸點（Touch對象）。
touchmove：用戶移動觸摸點時觸發(fā)，它的target屬性與touchstart事件的target屬性一致。如果觸摸的半徑、角度、力度發(fā)生變化，也會觸發(fā)該事件。
touchcancel：觸摸點取消時觸發(fā)，比如在觸摸區(qū)域跳出一個情態(tài)窗口（modal window）、觸摸點離開了文檔區(qū)域（進入瀏覽器菜單欄區(qū)域）、用戶放置更多的觸摸點（自動取消早先的觸摸點）。
下面是一個例子。
var el = document.getElementsByTagName("canvas")[0];
el.addEventListener("touchstart", handleStart, false);
el.addEventListener("touchmove", handleMove, false);
function handleStart(evt) {
// 阻止瀏覽器繼續(xù)處理觸摸事件，
// 也阻止發(fā)出鼠標事件
evt.preventDefault();
var touches = evt.changedTouches;
for (var i = 0; i < touches.length; i++) {
console.log(touches[i].pageX, touches[i].pageY);
}
}
function handleMove(evt) {
evt.preventDefault();
var touches = evt.changedTouches;
for (var i = 0; i < touches.length; i++) {
var id = touches[i].identifier;
var touch = touches.identifiedTouch(id);
console.log(touch.pageX, touch.pageY);
}
}表單事件
Input事件，select事件，change事件
以下事件與表單成員的值變化有關。
（1）input事件
input事件當、的值發(fā)生變化時觸發(fā)。此外，打開contenteditable屬性的元素，只要值發(fā)生變化，也會觸發(fā)input事件。
input事件的一個特點，就是會連續(xù)觸發(fā)，比如用戶每次按下一次按鍵，就會觸發(fā)一次input事件。
（2）select事件
select事件當在、中選中文本時觸發(fā)。
// HTML代碼為
// <input id="test" type="text" value="Select me!" />
var elem = document.getElementById('test');
elem.addEventListener('select', function() {
console.log('Selection changed!');
}, false);（3）Change事件
Change事件當、、的值發(fā)生變化時觸發(fā)。它與input事件的最大不同，就是不會連續(xù)觸發(fā)，只有當全部修改完成時才會觸發(fā)，而且input事件必然會引發(fā)change事件。具體來說，分成以下幾種情況。
激活單選框（radio）或復選框（checkbox）時觸發(fā)。
用戶提交時觸發(fā)。比如，從下列列表（select）完成選擇，在日期或文件輸入框完成選擇。
當文本框或textarea元素的值發(fā)生改變，并且喪失焦點時觸發(fā)。
下面是一個例子。
// HTML代碼為
// <select size="1" onchange="changeEventHandler(event);">
// <option>chocolate</option>
// <option>strawberry</option>
// <option>vanilla</option>
// </select>
function changeEventHandler(event) {
console.log('You like ' + event.target.value + ' ice cream.');
}reset事件，submit事件
以下事件發(fā)生在表單對象上，而不是發(fā)生在表單的成員上。
（1）reset事件
reset事件當表單重置（所有表單成員變回默認值）時觸發(fā)。
（2）submit事件
submit事件當表單數(shù)據(jù)向服務器提交時觸發(fā)。注意，submit事件的發(fā)生對象是form元素，而不是button元素（即使它的類型是submit），因為提交的是表單，而不是按鈕。
文檔事件
beforeunload事件，unload事件，load事件，error事件，pageshow事件，pagehide事件
以下事件與網(wǎng)頁的加載與卸載相關。
（1）beforeunload事件
beforeunload事件當窗口將要關閉，或者document和網(wǎng)頁資源將要卸載時觸發(fā)。它可以用來防止用戶不當心關閉網(wǎng)頁。
該事件的默認動作就是關閉當前窗口或文檔。如果在監(jiān)聽函數(shù)中，調(diào)用了event.preventDefault()，或者對事件對象的returnValue屬性賦予一個非空的值，就會自動跳出一個確認框，讓用戶確認是否關閉網(wǎng)頁。如果用戶點擊“取消”按鈕，網(wǎng)頁就不會關閉。監(jiān)聽函數(shù)所返回的字符串，會顯示在確認對話框之中。
window.onbeforeunload = function() {
if (textarea.value != textarea.defaultValue) {
return '你確認要離開嗎？';
}
};上面代碼表示，當用戶關閉網(wǎng)頁，會跳出一個確認對話框，上面顯示“你確認要離開嗎？”。
下面的兩種寫法，具有同樣效果。
window.addEventListener('beforeunload', function( event ) {
event.returnValue = '你確認要離開嗎？';
});
// 等同于
window.addEventListener('beforeunload', function( event ) {
event.preventDefault();
});上面代碼中，事件對象的returnValue屬性的值，將會成為確認框的提示文字。
只要定義了beforeunload事件的監(jiān)聽函數(shù)，網(wǎng)頁不會被瀏覽器緩存。
（2）unload事件
unload事件在窗口關閉或者document對象將要卸載時觸發(fā)，發(fā)生在window、body、frameset等對象上面。它的觸發(fā)順序排在beforeunload、pagehide事件后面。unload事件只在頁面沒有被瀏覽器緩存時才會觸發(fā)，換言之，如果通過按下“前進/后退”導致頁面卸載，并不會觸發(fā)unload事件。
當unload事件發(fā)生時，document對象處于一個特殊狀態(tài)。所有資源依然存在，但是對用戶來說都不可見，UI互動（window.open、alert、confirm方法等）全部無效。這時即使拋出錯誤，也不能停止文檔的卸載。
window.addEventListener('unload', function(event) {
console.log('文檔將要卸載');
});如果在window對象上定義了該事件，網(wǎng)頁就不會被瀏覽器緩存。
（3）load事件，error事件
load事件在頁面加載成功時觸發(fā)，error事件在頁面加載失敗時觸發(fā)。注意，頁面從瀏覽器緩存加載，并不會觸發(fā)load事件。
這兩個事件實際上屬于進度事件，不僅發(fā)生在document對象，還發(fā)生在各種外部資源上面。瀏覽網(wǎng)頁就是一個加載各種資源的過程，圖像（image）、樣式表（style sheet）、腳本（script）、視頻（video）、音頻（audio）、Ajax請求（XMLHttpRequest）等等。這些資源和document對象、window對象、XMLHttpRequestUpload對象，都會觸發(fā)load事件和error事件。
（4）pageshow事件，pagehide事件
默認情況下，瀏覽器會在當前會話（session）緩存頁面，當用戶點擊“前進/后退”按鈕時，瀏覽器就會從緩存中加載頁面。
pageshow事件在頁面加載時觸發(fā)，包括第一次加載和從緩存加載兩種情況。如果要指定頁面每次加載（不管是不是從瀏覽器緩存）時都運行的代碼，可以放在這個事件的監(jiān)聽函數(shù)。
第一次加載時，它的觸發(fā)順序排在load事件后面。從緩存加載時，load事件不會觸發(fā)，因為網(wǎng)頁在緩存中的樣子通常是load事件的監(jiān)聽函數(shù)運行后的樣子，所以不必重復執(zhí)行。同理，如果是從緩存中加載頁面，網(wǎng)頁內(nèi)初始化的JavaScript腳本（比如DOMContentLoaded事件的監(jiān)聽函數(shù)）也不會執(zhí)行。
window.addEventListener('pageshow', function(event) {
console.log('pageshow: ', event);
});pageshow事件有一個persisted屬性，返回一個布爾值。頁面第一次加載時，這個屬性是false；當頁面從緩存加載時，這個屬性是true。
window.addEventListener('pageshow', function(event){
if (event.persisted) {
// ...
}
});pagehide事件與pageshow事件類似，當用戶通過“前進/后退”按鈕，離開當前頁面時觸發(fā)。它與unload事件的區(qū)別在于，如果在window對象上定義unload事件的監(jiān)聽函數(shù)之后，頁面不會保存在緩存中，而使用pagehide事件，頁面會保存在緩存中。
pagehide事件的event對象有一個persisted屬性，將這個屬性設為true，就表示頁面要保存在緩存中；設為false，表示網(wǎng)頁不保存在緩存中，這時如果設置了unload事件的監(jiān)聽函數(shù)，該函數(shù)將在pagehide事件后立即運行。
如果頁面包含frame或iframe元素，則frame頁面的pageshow事件和pagehide事件，都會在主頁面之前觸發(fā)。
DOMContentLoaded事件，readystatechange事件
以下事件與文檔狀態(tài)相關。
（1）DOMContentLoaded事件
當HTML文檔下載并解析完成以后，就會在document對象上觸發(fā)DOMContentLoaded事件。這時，僅僅完成了HTML文檔的解析（整張頁面的DOM生成），所有外部資源（樣式表、腳本、iframe等等）可能還沒有下載結(jié)束。也就是說，這個事件比load事件，發(fā)生時間早得多。
document.addEventListener("DOMContentLoaded", function(event) {
console.log("DOM生成");
});注意，網(wǎng)頁的JavaScript腳本是同步執(zhí)行的，所以定義DOMContentLoaded事件的監(jiān)聽函數(shù)，應該放在所有腳本的最前面。否則腳本一旦發(fā)生堵塞，將推遲觸發(fā)DOMContentLoaded事件。
（2）readystatechange事件
readystatechange事件發(fā)生在Document對象和XMLHttpRequest對象，當它們的readyState屬性發(fā)生變化時觸發(fā)。
document.onreadystatechange = function () {
if (document.readyState == "interactive") {
// ...
}
}IE8不支持DOMContentLoaded事件，但是支持這個事件。因此，可以使用readystatechange事件，在低版本的IE中代替DOMContentLoaded事件。
scroll事件，resize事件
以下事件與窗口行為有關。
（1）scroll事件
scroll事件在文檔或文檔元素滾動時觸發(fā)。
由于該事件會連續(xù)地大量觸發(fā)，所以它的監(jiān)聽函數(shù)之中不應該有非常耗費計算的操作。推薦的做法是使用requestAnimationFrame或setTimeout控制該事件的觸發(fā)頻率，然后可以結(jié)合customEvent拋出一個新事件。
(function() {
var throttle = function(type, name, obj) {
var obj = obj || window;
var running = false;
var func = function() {
if (running) { return; }
running = true;
requestAnimationFrame(function() {
obj.dispatchEvent(new CustomEvent(name));
running = false;
});
};
obj.addEventListener(type, func);
};
// 將scroll事件重定義為optimizedScroll事件
throttle("scroll", "optimizedScroll");
})();
window.addEventListener("optimizedScroll", function() {
console.log("Resource conscious scroll callback!");
});上面代碼中，throttle函數(shù)用于控制事件觸發(fā)頻率，requestAnimationFrame方法保證每次頁面重繪（每秒60次），只會觸發(fā)一次scroll事件的監(jiān)聽函數(shù)。改用setTimeout方法，可以放置更大的時間間隔。
(function() {
window.addEventListener("scroll", scrollThrottler, false);
var scrollTimeout;
function scrollThrottler() {
if ( !scrollTimeout ) {
scrollTimeout = setTimeout(function() {
scrollTimeout = null;
actualScrollHandler();
}, 66);
}
}
function actualScrollHandler() {
// ...
}
}());上面代碼中，setTimeout指定scroll事件的監(jiān)聽函數(shù)，每66毫秒觸發(fā)一次（每秒15次）。
（2）resize事件
resize事件在改變?yōu)g覽器窗口大小時觸發(fā)，發(fā)生在window、body、frameset對象上面。
var resizeMethod = function(){
if (document.body.clientWidth < 768) {
console.log('移動設備');
}
};
window.addEventListener("resize", resizeMethod, true);該事件也會連續(xù)地大量觸發(fā)，所以最好像上面的scroll事件一樣，通過throttle函數(shù)控制事件觸發(fā)頻率。
hashchange事件，popstate事件
以下事件與文檔的URL變化相關。
（1）hashchange事件
hashchange事件在URL的hash部分（即#號后面的部分，包括#號）發(fā)生變化時觸發(fā)。如果老式瀏覽器不支持該屬性，可以通過定期檢查location.hash屬性，模擬該事件，下面就是代碼。
(function(window) {
if ( "onhashchange" in window.document.body ) { return; }
var location = window.location;
var oldURL = location.href;
var oldHash = location.hash;
// 每隔100毫秒檢查一下URL的hash
setInterval(function() {
var newURL = location.href;
var newHash = location.hash;
if ( newHash != oldHash && typeof window.onhashchange === "function" ) {
window.onhashchange({
type: "hashchange",
oldURL: oldURL,
newURL: newURL
});
oldURL = newURL;
oldHash = newHash;
}
}, 100);
})(window);hashchange事件對象除了繼承Event對象，還有oldURL屬性和newURL屬性，分別表示變化前后的URL。
（2）popstate事件
popstate事件在瀏覽器的history對象的當前記錄發(fā)生顯式切換時觸發(fā)。注意，調(diào)用history.pushState()或history.replaceState()，并不會觸發(fā)popstate事件。該事件只在用戶在history記錄之間顯式切換時觸發(fā)，比如鼠標點擊“后退/前進”按鈕，或者在腳本中調(diào)用history.back()、history.forward()、history.go()時觸發(fā)。
該事件對象有一個state屬性，保存history.pushState方法和history.replaceState方法為當前記錄添加的state對象。
window.onpopstate = function(event) {
console.log("state: " + event.state);
};
history.pushState({page: 1}, "title 1", "?page=1");
history.pushState({page: 2}, "title 2", "?page=2");
history.replaceState({page: 3}, "title 3", "?page=3");
history.back(); // state: {"page":1}
history.back(); // state: null
history.go(2); // state: {"page":3}上面代碼中，pushState方法向history添加了兩條記錄，然后replaceState方法替換掉當前記錄。因此，連續(xù)兩次back方法，會讓當前條目退回到原始網(wǎng)址，它沒有附帶state對象，所以事件的state屬性為null，然后前進兩條記錄，又回到replaceState方法添加的記錄。
瀏覽器對于頁面首次加載，是否觸發(fā)popstate事件，處理不一樣，F(xiàn)irefox不觸發(fā)該事件。
cut事件，copy事件，paste事件
以下三個事件屬于文本操作觸發(fā)的事件。
cut事件：在將選中的內(nèi)容從文檔中移除，加入剪貼板后觸發(fā)。
copy事件：在選中的內(nèi)容加入剪貼板后觸發(fā)。
paste事件：在剪貼板內(nèi)容被粘貼到文檔后觸發(fā)。
這三個事件都有一個clipboardData只讀屬性。該屬性存放剪貼的數(shù)據(jù)，是一個DataTransfer對象，具體的API接口和操作方法，請參見《觸摸事件》的DataTransfer對象章節(jié)。
焦點事件
焦點事件發(fā)生在Element節(jié)點和document對象上面，與獲得或失去焦點相關。它主要包括以下四個事件。
focus事件：Element節(jié)點獲得焦點后觸發(fā)，該事件不會冒泡。
blur事件：Element節(jié)點失去焦點后觸發(fā)，該事件不會冒泡。
focusin事件：Element節(jié)點將要獲得焦點時觸發(fā)，發(fā)生在focus事件之前。該事件會冒泡。Firefox不支持該事件。
focusout事件：Element節(jié)點將要失去焦點時觸發(fā)，發(fā)生在blur事件之前。該事件會冒泡。Firefox不支持該事件。
這四個事件的事件對象，帶有target屬性（返回事件的目標節(jié)點）和relatedTarget屬性（返回一個Element節(jié)點）。對于focusin事件，relatedTarget屬性表示失去焦點的節(jié)點；對于focusout事件，表示將要接受焦點的節(jié)點；對于focus和blur事件，該屬性返回null。
由于focus和blur事件不會冒泡，只能在捕獲階段觸發(fā)，所以addEventListener方法的第三個參數(shù)需要設為true。
form.addEventListener("focus", function( event ) {
event.target.style.background = "pink";
}, true);
form.addEventListener("blur", function( event ) {
event.target.style.background = "";
}, true);上面代碼設置表單的文本輸入框，在接受焦點時設置背景色，在失去焦點時去除背景色。
瀏覽器提供一個FocusEvent構(gòu)造函數(shù)，可以用它生成焦點事件的實例。
var focusEvent = new FocusEvent(typeArg, focusEventInit);
上面代碼中，F(xiàn)ocusEvent構(gòu)造函數(shù)的第一個參數(shù)為事件類型，第二個參數(shù)是可選的配置對象，用來配置FocusEvent對象。
自定義事件和事件模擬
除了瀏覽器預定義的那些事件，用戶還可以自定義事件，然后手動觸發(fā)。
// 新建事件實例
var event = new Event('build');
// 添加監(jiān)聽函數(shù)
elem.addEventListener('build', function (e) { ... }, false);
// 觸發(fā)事件
elem.dispatchEvent(event);上面代碼觸發(fā)了自定義事件，該事件會層層向上冒泡。在冒泡過程中，如果有一個元素定義了該事件的監(jiān)聽函數(shù)，該監(jiān)聽函數(shù)就會觸發(fā)。
由于IE不支持這個API，如果在IE中自定義事件，需要使用后文的“老式方法”。
CustomEvent()
Event構(gòu)造函數(shù)只能指定事件名，不能在事件上綁定數(shù)據(jù)。如果需要在觸發(fā)事件的同時，傳入指定的數(shù)據(jù)，需要使用CustomEvent構(gòu)造函數(shù)生成自定義的事件對象。
var event = new CustomEvent('build', { 'detail': 'hello' });
function eventHandler(e) {
console.log(e.detail);
}上面代碼中，CustomEvent構(gòu)造函數(shù)的第一個參數(shù)是事件名稱，第二個參數(shù)是一個對象，該對象的detail屬性會綁定在事件對象之上。
下面是另一個例子。
var myEvent = new CustomEvent("myevent", {
detail: {
foo: "bar"
},
bubbles: true,
cancelable: false
});
el.addEventListener('myevent', function(event) {
console.log('Hello ' + event.detail.foo);
});
el.dispatchEvent(myEvent);IE不支持這個方法，可以用下面的墊片函數(shù)模擬。
(function () {
function CustomEvent ( event, params ) {
params = params || { bubbles: false, cancelable: false, detail: undefined };
var evt = document.createEvent( 'CustomEvent' );
evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
return evt;
}
CustomEvent.prototype = window.Event.prototype;
window.CustomEvent = CustomEvent;
})();事件的模擬
有時，需要在腳本中模擬觸發(fā)某種類型的事件，這時就必須使用這種事件的構(gòu)造函數(shù)。
下面是一個通過MouseEvent構(gòu)造函數(shù)，模擬觸發(fā)click鼠標事件的例子。
function simulateClick() {
var event = new MouseEvent('click', {
'bubbles': true,
'cancelable': true
});
var cb = document.getElementById('checkbox');
cb.dispatchEvent(event);
}自定義事件的老式寫法
老式瀏覽器不一定支持各種類型事件的構(gòu)造函數(shù)。因此，有時為了兼容，會用到一些非標準的方法。這些方法未來會被逐步淘汰，但是目前瀏覽器還廣泛支持。除非是為了兼容老式瀏覽器，盡量不要使用。
（1）document.createEvent()
document.createEvent方法用來新建指定類型的事件。它所生成的Event實例，可以傳入dispatchEvent方法。
// 新建Event實例
var event = document.createEvent('Event');
// 事件的初始化
event.initEvent('build', true, true);
// 加上監(jiān)聽函數(shù)
document.addEventListener('build', doSomething, false);
// 觸發(fā)事件
document.dispatchEvent(event);createEvent方法接受一個字符串作為參數(shù)，可能的值參見下表“數(shù)據(jù)類型”一欄。使用了某一種“事件類型”，就必須使用對應的事件初始化方法。
| 事件類型 | 事件初始化方法 |
|---|---|
| UIEvents | event.initUIEvent |
| MouseEvents | event.initMouseEvent |
| MutationEvents | event.initMutationEvent |
| HTMLEvents | event.initEvent |
| Event | event.initEvent |
| CustomEvent | event.initCustomEvent |
| KeyboardEvent | event.initKeyEvent |
（2）event.initEvent()
事件對象的initEvent方法，用來初始化事件對象，還能向事件對象添加屬性。該方法的參數(shù)必須是一個使用Document.createEvent()生成的Event實例，而且必須在dispatchEvent方法之前調(diào)用。
var event = document.createEvent('Event');
event.initEvent('my-custom-event', true, true, {foo:'bar'});
someElement.dispatchEvent(event);initEvent方法可以接受四個參數(shù)。
type：事件名稱，格式為字符串。
bubbles：事件是否應該冒泡，格式為布爾值。可以使用event.bubbles屬性讀取它的值。
cancelable：事件是否能被取消，格式為布爾值?？梢允褂胑vent.cancelable屬性讀取它的值。
option：為事件對象指定額外的屬性。
事件模擬的老式寫法
事件模擬的非標準做法是，對document.createEvent方法生成的事件對象，使用對應的事件初始化方法進行初始化。比如，click事件對象屬于MouseEvent對象，也屬于UIEvent對象，因此要用initMouseEvent方法或initUIEvent方法進行初始化。
（1）event.initMouseEvent()
initMouseEvent方法用來初始化Document.createEvent方法新建的鼠標事件。該方法必須在事件新建（document.createEvent方法）之后、觸發(fā)（dispatchEvent方法）之前調(diào)用。
initMouseEvent方法有很長的參數(shù)。
event.initMouseEvent(type, canBubble, cancelable, view, detail, screenX, screenY, clientX, clientY, ctrlKey, altKey, shiftKey, metaKey, button, relatedTarget );
上面這些參數(shù)的含義，參見MouseEvent構(gòu)造函數(shù)的部分。
模仿并觸發(fā)click事件的寫法如下。
var simulateDivClick = document.createEvent('MouseEvents');
simulateDivClick.initMouseEvent('click',true,true,
document.defaultView,0,0,0,0,0,false,
false,false,0,null,null
);
divElement.dispatchEvent(simulateDivClick);（2）UIEvent.initUIEvent()
UIEvent.initUIEvent()用來初始化一個UI事件。該方法必須在事件新建（document.createEvent方法）之后、觸發(fā)（dispatchEvent方法）之前調(diào)用。
event.initUIEvent(type, canBubble, cancelable, view, detail)
該方法的參數(shù)含義，可以參見MouseEvent構(gòu)造函數(shù)的部分。其中，detail參數(shù)是一個數(shù)值，含義與事件類型有關，對于鼠標事件，這個值表示鼠標按鍵在某個位置按下的次數(shù)。
var e = document.createEvent("UIEvent");
e.initUIEvent("click", true, true, window, 1);參考鏈接
Wilson Page, An Introduction To DOM Events
Mozilla Developer Network, Using Firefox 1.5 caching
Craig Buckler, How to Capture CSS3 Animation Events in JavaScript
Ray Nicholus, You Don't Need jQuery!: Events