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