5.5 Event對象 · JavaScript 標準參考教程

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