JavaScript 事件種類

目錄

本節(jié)介紹各種常見的瀏覽器事件。

鼠標(biāo)事件指與鼠標(biāo)相關(guān)的事件，主要有以下一些。

1.1 click 事件，dblclick 事件

當(dāng)用戶在Element節(jié)點、document節(jié)點、window對象上單擊鼠標(biāo)（或者按下回車鍵）時，click事件觸發(fā)。

“鼠標(biāo)單擊”定義為，用戶在同一個位置完成一次mousedown動作和mouseup動作。它們的觸發(fā)順序是：mousedown首先觸發(fā)，mouseup接著觸發(fā)，click最后觸發(fā)。

下面是一個設(shè)置click事件監(jiān)聽函數(shù)的例子。

div.addEventListener("click", function( event ) {
  // 顯示在該節(jié)點，鼠標(biāo)連續(xù)點擊的次數(shù)
  event.target.innerHTML = "click count: " + event.detail;
}, false);

下面的代碼是利用click事件進行CSRF攻擊（Cross-site request forgery）的一個例子。

<a  rel="external nofollow" target="_blank"  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>

dblclick事件當(dāng)用戶在element、document、window對象上，雙擊鼠標(biāo)時觸發(fā)。該事件會在mousedown、mouseup、click之后觸發(fā)。

1.2 mouseup 事件，mousedown 事件，mousemove 事件

mouseup事件在釋放按下的鼠標(biāo)鍵時觸發(fā)。

mousedown事件在按下鼠標(biāo)鍵時觸發(fā)。

mousemove事件當(dāng)鼠標(biāo)在一個節(jié)點內(nèi)部移動時觸發(fā)。當(dāng)鼠標(biāo)持續(xù)移動時，該事件會連續(xù)觸發(fā)。為了避免性能問題，建議對該事件的監(jiān)聽函數(shù)做一些限定，比如限定一段時間內(nèi)只能運行一次代碼。

1.3 mouseover 事件，mouseenter 事件

mouseover事件和mouseenter事件，都是鼠標(biāo)進入一個節(jié)點時觸發(fā)。

兩者的區(qū)別是，mouseenter事件只觸發(fā)一次，而只要鼠標(biāo)在節(jié)點內(nèi)部移動，mouseover事件會在子節(jié)點上觸發(fā)多次。

// HTML代碼為
// <ul id="test">
//   <li>item 1</li>
//   <li>item 2</li>
//   <li>item 3</li>
// </ul>

var test = document.getElementById('test');

// 進入test節(jié)點以后，該事件只會觸發(fā)一次
// event.target 是 ul 節(jié)點
test.addEventListener('mouseenter', function (event) {
  event.target.style.color = 'purple';
  setTimeout(function () {
    event.target.style.color = '';
  }, 500);
}, false);

// 進入test節(jié)點以后，只要在子Element節(jié)點上移動，該事件會觸發(fā)多次
// event.target 是 li 節(jié)點
test.addEventListener('mouseover', function (event) {
  event.target.style.color = 'orange';
  setTimeout(function () {
    event.target.style.color = '';
  }, 500);
}, false);

1.4 mouseout 事件，mouseleave 事件

mouseout事件和mouseleave事件，都是鼠標(biāo)離開一個節(jié)點時觸發(fā)。

兩者的區(qū)別是，mouseout事件會冒泡，mouseleave事件不會。子節(jié)點的mouseout事件會冒泡到父節(jié)點，進而觸發(fā)父節(jié)點的mouseout事件。mouseleave事件就沒有這種效果，所以離開子節(jié)點時，不會觸發(fā)父節(jié)點的監(jiān)聽函數(shù)。

1.5 contextmenu 事件

contextmenu事件在一個節(jié)點上點擊鼠標(biāo)右鍵時觸發(fā)，或者按下“上下文菜單”鍵時觸發(fā)。

2.1 概述

鼠標(biāo)事件使用MouseEvent對象表示，它繼承UIEvent對象和Event對象。瀏覽器提供一個MouseEvent構(gòu)造函數(shù)，用于新建一個MouseEvent實例。

event = new MouseEvent(typeArg, mouseEventInit);

MouseEvent構(gòu)造函數(shù)的第一個參數(shù)是事件名稱（可能的值包括click、mousedown、mouseup、mouseover、mousemove、mouseout），第二個參數(shù)是一個事件初始化對象。該對象可以配置以下屬性。

• screenX，設(shè)置鼠標(biāo)相對于屏幕的水平坐標(biāo)（但不會移動鼠標(biāo)），默認為0，等同于MouseEvent.screenX屬性。
• screenY，設(shè)置鼠標(biāo)相對于屏幕的垂直坐標(biāo)，默認為0，等同于MouseEvent.screenY屬性。
• clientX，設(shè)置鼠標(biāo)相對于窗口的水平坐標(biāo)，默認為0，等同于MouseEvent.clientX屬性。
• clientY，設(shè)置鼠標(biāo)相對于窗口的垂直坐標(biāo)，默認為0，等同于MouseEvent.clientY屬性。
• ctrlKey，設(shè)置是否按下ctrl鍵，默認為false，等同于MouseEvent.ctrlKey屬性。
• shiftKey，設(shè)置是否按下shift鍵，默認為false，等同于MouseEvent.shiftKey屬性。
• altKey，設(shè)置是否按下alt鍵，默認為false，等同于MouseEvent.altKey屬性。
• metaKey，設(shè)置是否按下meta鍵，默認為false，等同于MouseEvent.metaKey屬性。
• button，設(shè)置按下了哪一個鼠標(biāo)按鍵，默認為0。-1表示沒有按鍵，0表示按下主鍵（通常是左鍵），1表示按下輔助鍵（通常是中間的鍵），2表示按下次要鍵（通常是右鍵）。
• buttons，設(shè)置按下了鼠標(biāo)哪些鍵，是一個3個比特位的二進制值，默認為0。1表示按下主鍵（通常是左鍵），2表示按下次要鍵（通常是右鍵），4表示按下輔助鍵（通常是中間的鍵）。
• relatedTarget，設(shè)置一個Element節(jié)點，在mouseenter和mouseover事件時，表示鼠標(biāo)剛剛離開的那個Element節(jié)點，在mouseout和mouseleave事件時，表示鼠標(biāo)正在進入的那個Element節(jié)點。默認為null，等同于MouseEvent.relatedTarget屬性。

以下屬性也是可配置的，都繼承自UIEvent構(gòu)造函數(shù)和Event構(gòu)造函數(shù)。

• bubbles，布爾值，設(shè)置事件是否冒泡，默認為false，等同于Event.bubbles屬性。
• cancelable，布爾值，設(shè)置事件是否可取消，默認為false，等同于Event.cancelable屬性。
• view，設(shè)置事件的視圖，一般是window或document.defaultView，等同于Event.view屬性。
• detail，設(shè)置鼠標(biāo)點擊的次數(shù)，等同于Event.detail屬性。

下面是一個例子。

function simulateClick() {
  var event = new MouseEvent('click', {
    'bubbles': true,
    'cancelable': true
  });
  var cb = document.getElementById('checkbox');
  cb.dispatchEvent(event);
}

上面代碼生成一個鼠標(biāo)點擊事件，并觸發(fā)該事件。

以下介紹MouseEvent實例的屬性。

2.2 altKey，ctrlKey，metaKey，shiftKey

以下屬性返回一個布爾值，表示鼠標(biāo)事件發(fā)生時，是否按下某個鍵。

• altKey屬性：Alt 鍵
• ctrlKey屬性：Ctrl 鍵
• 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("SHIFT key pressed: " + e.shiftKey);
}

上面代碼中，點擊網(wǎng)頁會輸出是否同時按下Alt鍵。

2.3 button，buttons

以下屬性返回事件的鼠標(biāo)鍵信息。

（1）button

button屬性返回一個數(shù)值，表示按下了鼠標(biāo)哪個鍵。

• -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個比特位的值，表示同時按下了哪些鍵。它用來處理同時按下多個鼠標(biāo)鍵的情況。

• 1：二進制為001，表示按下左鍵。
• 2：二進制為010，表示按下右鍵。
• 4：二進制為100，表示按下中鍵或滾輪鍵。

同時按下多個鍵的時候，每個按下的鍵對應(yīng)的比特位都會有值。比如，同時按下左鍵和右鍵，會返回3（二進制為011）。

2.4 clientX，clientY，movementX，movementY，screenX，screenY

以下屬性與事件的位置相關(guān)。

（1）clientX，clientY

clientX屬性返回鼠標(biāo)位置相對于瀏覽器窗口左上角的水平坐標(biāo)，單位為像素，與頁面是否橫向滾動無關(guān)。

clientY屬性返回鼠標(biāo)位置相對于瀏覽器窗口左上角的垂直坐標(biāo)，單位為像素，與頁面是否縱向滾動無關(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屬性返回一個水平位移，單位為像素，表示當(dāng)前位置與上一個mousemove事件之間的水平距離。在數(shù)值上，等于currentEvent.movementX = currentEvent.screenX - previousEvent.screenX。

movementY屬性返回一個垂直位移，單位為像素，表示當(dāng)前位置與上一個mousemove事件之間的垂直距離。在數(shù)值上，等于currentEvent.movementY = currentEvent.screenY - previousEvent.screenY。

（3）screenX，screenY

screenX屬性返回鼠標(biāo)位置相對于屏幕左上角的水平坐標(biāo)，單位為像素。

screenY屬性返回鼠標(biāo)位置相對于屏幕左上角的垂直坐標(biāo)，單位為像素。

// HTML代碼為
// <body onmousedown="showCoords(event)">

function showCoords(evt){
  console.log(
    "screenX value: " + evt.screenX + "\n"
    + "screenY value: " + evt.screenY + "\n"
  );
}

2.5 relatedTarget

relatedTarget屬性返回事件的次要相關(guān)節(jié)點。對于那些沒有次要相關(guān)節(jié)點的事件，該屬性返回null。

下表列出不同事件的target屬性和relatedTarget屬性含義。

下面是一個例子。

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

// 鼠標(biāo)從outer進入inner，輸出
// 進入inner 離開outer
// 進入inner 離開outer

// 鼠標(biāo)從inner進入outer，輸出
// 離開inner 進入outer
// 離開inner 進入outer

wheel事件是與鼠標(biāo)滾輪相關(guān)的事件，目前只有一個wheel事件。用戶滾動鼠標(biāo)的滾輪，就觸發(fā)這個事件。

該事件除了繼承了MouseEvent、UIEvent、Event的屬性，還有幾個自己的屬性。

• deltaX：返回一個數(shù)值，表示滾輪的水平滾動量。
• deltaY：返回一個數(shù)值，表示滾輪的垂直滾動量。
• deltaZ：返回一個數(shù)值，表示滾輪的Z軸滾動量。
• deltaMode：返回一個數(shù)值，表示滾動的單位，適用于上面三個屬性。0表示像素，1表示行，2表示頁。

瀏覽器提供一個WheelEvent構(gòu)造函數(shù)，可以用來生成滾輪事件的實例。它接受兩個參數(shù)，第一個是事件名稱，第二個是配置對象。

var syntheticEvent = new WheelEvent("syntheticWheel", {"deltaX": 4, "deltaMode": 0});

鍵盤事件用來描述鍵盤行為，主要有keydown、keypress、keyup三個事件。

• keydown：按下鍵盤時觸發(fā)該事件。

• keypress：只要按下的鍵并非Ctrl、Alt、Shift和Meta，就接著觸發(fā)keypress事件。

• keyup：松開鍵盤時觸發(fā)該事件。

下面是一個例子，對文本框設(shè)置keypress監(jiān)聽函數(shù)，只允許輸入數(shù)字。

// HTML代碼為
// <input type="text"
//   name="myInput"
//   onkeypress="return numbersOnly(this, event);"
//   onpaste="return false;"
// />

function numbersOnly(oToCheckField, oKeyEvent) {
  return oKeyEvent.charCode === 0
    || /\d/.test(String.fromCharCode(oKeyEvent.charCode));
}

如果用戶一直按鍵不松開，就會連續(xù)觸發(fā)鍵盤事件，觸發(fā)的順序如下。

1. keydown
2. keypress
3. keydown
4. keypress
5. （重復(fù)以上過程）
6. keyup

鍵盤事件使用KeyboardEvent對象表示，該對象繼承了UIEvent和MouseEvent對象。瀏覽器提供KeyboardEvent構(gòu)造函數(shù)，用來新建鍵盤事件的實例。

event = new KeyboardEvent(typeArg, KeyboardEventInit);

KeyboardEvent構(gòu)造函數(shù)的第一個參數(shù)是一個字符串，表示事件類型，第二個參數(shù)是一個事件配置對象，可配置以下字段。

• key，對應(yīng)KeyboardEvent.key屬性，默認為空字符串。
• ctrlKey，對應(yīng)KeyboardEvent.ctrlKey屬性，默認為false。
• shiftKey，對應(yīng)KeyboardEvent.shiftKey屬性，默認為false。
• altKey，對應(yīng)KeyboardEvent.altKey屬性，默認為false。
• metaKey，對應(yīng)KeyboardEvent.metaKey屬性，默認為false。

下面就是KeyboardEvent實例的屬性介紹。

4.1 altKey，ctrlKey，metaKey，shiftKey

以下屬性返回一個布爾值，表示是否按下對應(yīng)的鍵。

• altKey：alt鍵
• ctrlKey：ctrl鍵
• metaKey：meta鍵（mac系統(tǒng)是一個四瓣的小花，windows系統(tǒng)是windows鍵）
• shiftKey：shift鍵

function showChar(e){
  console.log("ALT: " + e.altKey);
  console.log("CTRL: " + e.ctrlKey);
  console.log("Meta: " + e.metaKey);
  console.log("Meta: " + e.shiftKey);
}

4.2 key，charCode

key屬性返回一個字符串，表示按下的鍵名。如果同時按下一個控制鍵和一個符號鍵，則返回符號鍵的鍵名。比如，按下Ctrl+a，則返回a。如果無法識別鍵名，則返回字符串Unidentified。

主要功能鍵的鍵名（不同的瀏覽器可能有差異）：Backspace，Tab，Enter，Shift，Control，Alt，CapsLock，Esc，Spacebar，PageUp，PageDown，End，Home，Left，Right，Up，Down，PrintScreen，Insert，Del，Win，F(xiàn)1～F12，NumLock，Scroll等。

charCode屬性返回一個數(shù)值，表示keypress事件按鍵的Unicode值，keydown和keyup事件不提供這個屬性。注意，該屬性已經(jīng)從標(biāo)準(zhǔn)移除，雖然瀏覽器還支持，但應(yīng)該盡量不使用。

進度事件用來描述一個事件進展的過程，比如XMLHttpRequest對象發(fā)出的HTTP請求的過程、<img>、<audio>、<video>、<style>、<link>加載外部資源的過程。下載和上傳都會發(fā)生進度事件。

進度事件有以下幾種。

• abort事件：當(dāng)進度事件被中止時觸發(fā)。如果發(fā)生錯誤，導(dǎo)致進程中止，不會觸發(fā)該事件。

• error事件：由于錯誤導(dǎo)致資源無法加載時觸發(fā)。

• load事件：進度成功結(jié)束時觸發(fā)。

• loadstart事件：進度開始時觸發(fā)。

• loadend事件：進度停止時觸發(fā)，發(fā)生順序排在error事件\abort事件\load事件后面。

• progress事件：當(dāng)操作處于進度之中，由傳輸?shù)臄?shù)據(jù)塊不斷觸發(fā)。

• timeout事件：進度超過限時觸發(fā)。

image.addEventListener('load', function(event) {
  image.classList.add('finished');
});

image.addEventListener('error', function(event) {
  image.style.display = 'none';
});

上面代碼在圖片元素加載完成后，為圖片元素的class屬性添加一個值“finished”。如果加載失敗，就把圖片元素的樣式設(shè)置為不顯示。

有時候，圖片加載會在腳本運行之前就完成，尤其是當(dāng)腳本放置在網(wǎng)頁底部的時候，因此有可能使得load和error事件的監(jiān)聽函數(shù)根本不會被執(zhí)行。所以，比較可靠的方式，是用complete屬性先判斷一下是否加載完成。

function loaded() {
  // code after image loaded
}

if (image.complete) {
  loaded();
} else {
  image.addEventListener('load', loaded);
}

由于DOM沒有提供像complete屬性那樣的，判斷是否發(fā)生加載錯誤的屬性，所以error事件的監(jiān)聽函數(shù)最好放在img元素的HTML屬性中，這樣才能保證發(fā)生加載錯誤時百分之百會執(zhí)行。

<img src="/wrong/url" onerror="this.style.display='none';" />

error事件有一個特殊的性質(zhì)，就是不會冒泡。這樣的設(shè)計是正確的，防止引發(fā)父元素的error事件監(jiān)聽函數(shù)。

進度事件使用ProgressEvent對象表示。ProgressEvent實例有以下屬性。

• lengthComputable：返回一個布爾值，表示當(dāng)前進度是否具有可計算的長度。如果為false，就表示當(dāng)前進度無法測量。

• total：返回一個數(shù)值，表示當(dāng)前進度的總長度。如果是通過HTTP下載某個資源，表示內(nèi)容本身的長度，不含HTTP頭部的長度。如果lengthComputable屬性為false，則total屬性就無法取得正確的值。

• loaded：返回一個數(shù)值，表示當(dāng)前進度已經(jīng)完成的數(shù)量。該屬性除以total屬性，就可以得到目前進度的百分比。

下面是一個例子。

var xhr = new XMLHttpRequest();

xhr.addEventListener("progress", updateProgress, false);
xhr.addEventListener("load", transferComplete, false);
xhr.addEventListener("error", transferFailed, false);
xhr.addEventListener("abort", transferCanceled, false);

xhr.open();

function updateProgress (e) {
  if (e.lengthComputable) {
    var percentComplete = e.loaded / e.total;
  } else {
    console.log('不能計算進度');
  }
}

function transferComplete(e) {
  console.log('傳輸結(jié)束');
}

function transferFailed(evt) {
  console.log('傳輸過程中發(fā)生錯誤');
}

function transferCanceled(evt) {
  console.log('用戶取消了傳輸');
}

loadend事件的監(jiān)聽函數(shù)，可以用來取代abort事件/load事件/error事件的監(jiān)聽函數(shù)。

req.addEventListener("loadend", loadEnd, false);

function loadEnd(e) {
  console.log('傳輸結(jié)束，成功失敗未知');
}

loadend事件本身不提供關(guān)于進度結(jié)束的原因，但可以用它來做所有進度結(jié)束場景都需要做的一些操作。

另外，上面是下載過程的進度事件，還存在上傳過程的進度事件。這時所有監(jiān)聽函數(shù)都要放在XMLHttpRequest.upload對象上面。

var xhr = new XMLHttpRequest();

xhr.upload.addEventListener("progress", updateProgress, false);
xhr.upload.addEventListener("load", transferComplete, false);
xhr.upload.addEventListener("error", transferFailed, false);
xhr.upload.addEventListener("abort", transferCanceled, false);

xhr.open();

瀏覽器提供一個ProgressEvent構(gòu)造函數(shù)，用來生成進度事件的實例。

progressEvent = new ProgressEvent(type, {
  lengthComputable: aBooleanValue,
  loaded: aNumber,
  total: aNumber
});

上面代碼中，ProgressEvent構(gòu)造函數(shù)的第一個參數(shù)是事件類型（字符串），第二個參數(shù)是配置對象，用來指定lengthComputable屬性（默認值為false）、loaded屬性（默認值為0）、total屬性（默認值為0）。

拖拉指的是，用戶在某個對象上按下鼠標(biāo)鍵不放，拖動它到另一個位置，然后釋放鼠標(biāo)鍵，將該對象放在那里。

拖拉的對象有好幾種，包括Element節(jié)點、圖片、鏈接、選中的文字等等。在HTML網(wǎng)頁中，除了Element節(jié)點默認不可以拖拉，其他（圖片、鏈接、選中的文字）都是可以直接拖拉的。為了讓Element節(jié)點可拖拉，可以將該節(jié)點的draggable屬性設(shè)為true。

<div draggable="true">
  此區(qū)域可拖拉
</div>

draggable屬性可用于任何Element節(jié)點，但是圖片（img元素）和鏈接（a元素）不加這個屬性，就可以拖拉。對于它們，用到這個屬性的時候，往往是將其設(shè)為false，防止拖拉。

注意，一旦某個Element節(jié)點的draggable屬性設(shè)為true，就無法再用鼠標(biāo)選中該節(jié)點內(nèi)部的文字或子節(jié)點了。

6.1 事件種類

當(dāng)Element節(jié)點或選中的文本被拖拉時，就會持續(xù)觸發(fā)拖拉事件，包括以下一些事件。

• drag事件：拖拉過程中，在被拖拉的節(jié)點上持續(xù)觸發(fā)。

• dragstart事件：拖拉開始時在被拖拉的節(jié)點上觸發(fā)，該事件的target屬性是被拖拉的節(jié)點。通常應(yīng)該在這個事件的監(jiān)聽函數(shù)中，指定拖拉的數(shù)據(jù)。

• dragend事件：拖拉結(jié)束時（釋放鼠標(biāo)鍵或按下escape鍵）在被拖拉的節(jié)點上觸發(fā)，該事件的target屬性是被拖拉的節(jié)點。它與dragstart事件，在同一個節(jié)點上觸發(fā)。不管拖拉是否跨窗口，或者中途被取消，dragend事件總是會觸發(fā)的。

• dragenter事件：拖拉進入當(dāng)前節(jié)點時，在當(dāng)前節(jié)點上觸發(fā)，該事件的target屬性是當(dāng)前節(jié)點。通常應(yīng)該在這個事件的監(jiān)聽函數(shù)中，指定是否允許在當(dāng)前節(jié)點放下（drop）拖拉的數(shù)據(jù)。如果當(dāng)前節(jié)點沒有該事件的監(jiān)聽函數(shù)，或者監(jiān)聽函數(shù)不執(zhí)行任何操作，就意味著不允許在當(dāng)前節(jié)點放下數(shù)據(jù)。在視覺上顯示拖拉進入當(dāng)前節(jié)點，也是在這個事件的監(jiān)聽函數(shù)中設(shè)置。

• dragover事件：拖拉到當(dāng)前節(jié)點上方時，在當(dāng)前節(jié)點上持續(xù)觸發(fā)，該事件的target屬性是當(dāng)前節(jié)點。該事件與dragenter事件基本類似，默認會重置當(dāng)前的拖拉事件的效果（DataTransfer對象的dropEffect屬性）為none，即不允許放下被拖拉的節(jié)點，所以如果允許在當(dāng)前節(jié)點drop數(shù)據(jù)，通常會使用preventDefault方法，取消重置拖拉效果為none。

• dragleave事件：拖拉離開當(dāng)前節(jié)點范圍時，在當(dāng)前節(jié)點上觸發(fā)，該事件的target屬性是當(dāng)前節(jié)點。在視覺上顯示拖拉離開當(dāng)前節(jié)點，就在這個事件的監(jiān)聽函數(shù)中設(shè)置。

• drop事件：被拖拉的節(jié)點或選中的文本，釋放到目標(biāo)節(jié)點時，在目標(biāo)節(jié)點上觸發(fā)。注意，如果當(dāng)前節(jié)點不允許drop，即使在該節(jié)點上方松開鼠標(biāo)鍵，也不會觸發(fā)該事件。如果用戶按下Escape鍵，取消這個操作，也不會觸發(fā)該事件。該事件的監(jiān)聽函數(shù)負責(zé)取出拖拉數(shù)據(jù)，并進行相關(guān)處理。

關(guān)于拖拉事件，有以下幾點注意事項。

• 拖拉過程只觸發(fā)以上這些拖拉事件，盡管鼠標(biāo)在移動，但是鼠標(biāo)事件不會觸發(fā)。

• 將文件從操作系統(tǒng)拖拉進瀏覽器，不會觸發(fā)dragStart和dragend事件。

• dragenter和dragover事件的監(jiān)聽函數(shù)，用來指定可以放下（drop）拖拉的數(shù)據(jù)。由于網(wǎng)頁的大部分區(qū)域不適合作為drop的目標(biāo)節(jié)點，所以這兩個事件的默認設(shè)置為當(dāng)前節(jié)點不允許drop。如果想要在目標(biāo)節(jié)點上drop拖拉的數(shù)據(jù)，首先必須阻止這兩個事件的默認行為，或者取消這兩個事件。

<div ondragover="return false">
<div ondragover="event.preventDefault()">

上面代碼中，如果不取消拖拉事件或者阻止默認行為，就不可能在div節(jié)點上drop被拖拉的節(jié)點。

拖拉事件用一個DragEvent對象表示，該對象繼承MouseEvent對象，因此也就繼承了UIEvent和Event對象。DragEvent對象只有一個獨有的屬性DataTransfer，其他都是繼承的屬性。DataTransfer屬性用來讀寫拖拉事件中傳輸?shù)臄?shù)據(jù)，詳見下文《DataTransfer對象》的部分。

下面的例子展示，如何動態(tài)改變被拖動節(jié)點的背景色。

div.addEventListener("dragstart", function(e) {
  this.style.backgroundColor = "red";
}, false);
div.addEventListener("dragend", function(e) {
  this.style.backgroundColor = "green";
}, false);

上面代碼中，div節(jié)點被拖動時，背景色會變?yōu)榧t色，拖動結(jié)束，又變回綠色。

下面是一個例子，顯示如何實現(xiàn)將一個節(jié)點從當(dāng)前父節(jié)點，拖拉到另一個父節(jié)點中。

// HTML代碼為
// <div class="dropzone">
//    <div id="draggable" draggable="true">
//       該節(jié)點可拖拉
//    </div>
// </div>
// <div class="dropzone"></div>
// <div class="dropzone"></div>
// <div class="dropzone"></div>

// 被拖拉節(jié)點
var dragged;

document.addEventListener("dragstart", function( event ) {
  // 保存被拖拉節(jié)點
  dragged = event.target;
  // 被拖拉節(jié)點的背景色變透明
  event.target.style.opacity = 0.5;
  // 兼容Firefox
  event.dataTransfer.setData('text/plain', 'anything');
}, false);

document.addEventListener('dragend', function( event ) {
  // 被拖拉節(jié)點的背景色恢復(fù)正常
  event.target.style.opacity = '';
}, false);

document.addEventListener('dragover', function( event ) {
  // 防止拖拉效果被重置，允許被拖拉的節(jié)點放入目標(biāo)節(jié)點
  event.preventDefault();
}, false);

document.addEventListener('dragenter', function( event ) {
  // 目標(biāo)節(jié)點的背景色變紫色
  // 由于該事件會冒泡，所以要過濾節(jié)點
  if ( event.target.className == 'dropzone' ) {
    event.target.style.background = 'purple';
  }
}, false);

document.addEventListener('dragleave', function( event ) {
  // 目標(biāo)節(jié)點的背景色恢復(fù)原樣
  if ( event.target.className == 'dropzone' ) {
    event.target.style.background = "";
  }
}, false);

document.addEventListener('drop', function( event ) {
  // 防止事件默認行為（比如某些Elment節(jié)點上可以打開鏈接）
  event.preventDefault();
  if ( event.target.className === 'dropzone' ) {
    // 恢復(fù)目標(biāo)節(jié)點背景色
    event.target.style.background = '';
    // 將被拖拉節(jié)點插入目標(biāo)節(jié)點
    dragged.parentNode.removeChild( dragged );
    event.target.appendChild( dragged );
  }
}, false);

6.2 DataTransfer對象概述

所有的拖拉事件都有一個dataTransfer屬性，用來保存需要傳遞的數(shù)據(jù)。這個屬性的值是一個DataTransfer對象。

拖拉的數(shù)據(jù)保存兩方面的數(shù)據(jù)：數(shù)據(jù)的種類（又稱格式）和數(shù)據(jù)的值。數(shù)據(jù)的種類是一個MIME字符串，比如 text/plain或者image/jpeg，數(shù)據(jù)的值是一個字符串。一般來說，如果拖拉一段文本，則數(shù)據(jù)默認就是那段文本；如果拖拉一個鏈接，則數(shù)據(jù)默認就是鏈接的URL。

當(dāng)拖拉事件開始的時候，可以提供數(shù)據(jù)類型和數(shù)據(jù)值；在拖拉過程中，通過dragenter和dragover事件的監(jiān)聽函數(shù)，檢查數(shù)據(jù)類型，以確定是否允許放下（drop）被拖拉的對象。比如，在只允許放下鏈接的區(qū)域，檢查拖拉的數(shù)據(jù)類型是否為text/uri-list。

發(fā)生drop事件時，監(jiān)聽函數(shù)取出拖拉的數(shù)據(jù)，對其進行處理。

6.3 DataTransfer對象的屬性

DataTransfer對象有以下屬性。

（1）dropEffect

dropEffect屬性設(shè)置放下（drop）被拖拉節(jié)點時的效果，可能的值包括copy（復(fù)制被拖拉的節(jié)點）、move（移動被拖拉的節(jié)點）、link（創(chuàng)建指向被拖拉的節(jié)點的鏈接）、none（無法放下被拖拉的節(jié)點）。設(shè)置除此以外的值，都是無效的。

target.addEventListener('dragover', function(e) {
  e.preventDefault();
  e.stopPropagation();
  e.dataTransfer.dropEffect = 'copy';
});

dropEffect屬性一般在dragenter和dragover事件的監(jiān)聽函數(shù)中設(shè)置，對于dragstart、drag、dragleave這三個事件，該屬性不起作用。進入目標(biāo)節(jié)點后，拖拉行為會初始化成用戶設(shè)定的效果，用戶可以通過按下Shift鍵和Control鍵，改變初始設(shè)置，在copy、move、link三種效果中切換。

鼠標(biāo)箭頭會根據(jù)dropEffect屬性改變形狀，提示目前正處于哪一種效果。這意味著，通過鼠標(biāo)就能判斷是否可以在當(dāng)前節(jié)點drop被拖拉的節(jié)點。

（2）effectAllowed

effectAllowed屬性設(shè)置本次拖拉中允許的效果，可能的值包括copy（復(fù)制被拖拉的節(jié)點）、move（移動被拖拉的節(jié)點）、link（創(chuàng)建指向被拖拉節(jié)點的鏈接）、copyLink（允許copy或link）、copyMove（允許copy或move）、linkMove（允許link或move）、all（允許所有效果）、none（無法放下被拖拉的節(jié)點）、uninitialized（默認值，等同于all）。如果某種效果是不允許的，用戶就無法在目標(biāo)節(jié)點中達成這種效果。

dragstart事件的監(jiān)聽函數(shù)，可以設(shè)置被拖拉節(jié)點允許的效果；dragenter和dragover事件的監(jiān)聽函數(shù)，可以設(shè)置目標(biāo)節(jié)點允許的效果。

event.dataTransfer.effectAllowed = "copy";

dropEffect屬性和effectAllowed屬性，往往配合使用。

event.dataTransfer.effectAllowed = "copyMove";
event.dataTransfer.dropEffect = "copy";

上面代碼中，copy是指定的效果，但是可以通過Shift或Ctrl鍵（根據(jù)平臺而定），將效果切換成move。

只要dropEffect屬性和effectAllowed屬性之中，有一個為none，就無法在目標(biāo)節(jié)點上完成drop操作。

（3）files

files屬性是一個FileList對象，包含一組本地文件，可以用來在拖拉操作中傳送。如果本次拖拉不涉及文件，則屬性為空的FileList對象。

下面就是一個接收拖拉文件的例子。

// HTML代碼為
// <div id="output" style="min-height: 200px;border: 1px solid black;">
//   文件拖拉到這里
// </div>

var div = document.getElementById('output');

div.addEventListener("dragenter", function( event ) {
  div.textContent = '';
  event.stopPropagation();
  event.preventDefault();
}, false);

div.addEventListener("dragover", function( event ) {
  event.stopPropagation();
  event.preventDefault();
}, false);

div.addEventListener("drop", function( event ) {
  event.stopPropagation();
  event.preventDefault();
  var files = event.dataTransfer.files;
  for (var i = 0; i < files.length; i++) {
    div.textContent += files[i].name + ' ' + files[i].size + '字節(jié)\n';
  }
}, false);

上面代碼中，通過files屬性讀取拖拉文件的信息。如果想要讀取文件內(nèi)容，就要使用FileReader對象。

div.addEventListener('drop', function(e) {
  e.preventDefault();
  e.stopPropagation();

  var fileList = e.dataTransfer.files;
  if (fileList.length > 0) {
    var file = fileList[0];
    var reader = new FileReader();
    reader.onloadend = function(e) {
      if (e.target.readyState == FileReader.DONE) {
        var content = reader.result;
        contentDiv.innerHTML = "File: " + file.name + "\n\n" + content;
      }
    }
    reader.readAsBinaryString(file);
  }
});

（4）types

types屬性是一個數(shù)組，保存每一次拖拉的數(shù)據(jù)格式，比如拖拉文件，則格式信息就為File。

下面是一個例子，通過檢查dataTransfer屬性的類型，決定是否允許在當(dāng)前節(jié)點執(zhí)行drop操作。

function contains(list, value){
  for( var i = 0; i < list.length; ++i ){
    if(list[i] === value) return true;
  }
  return false;
}

function doDragOver(event){
  var isLink = contains( event.dataTransfer.types, "text/uri-list");
  if (isLink) event.preventDefault();
}

上面代碼中，只有當(dāng)被拖拉的節(jié)點是一個鏈接時，才允許在當(dāng)前節(jié)點放下。

6.4 DataTransfer對象的方法

DataTransfer對象有以下方法。

（1）setData()

setData方法用來設(shè)置事件所帶有的指定類型的數(shù)據(jù)。它接受兩個參數(shù)，第一個是數(shù)據(jù)類型，第二個是具體數(shù)據(jù)。如果指定的類型在現(xiàn)有數(shù)據(jù)中不存在，則該類型將寫入types屬性；如果已經(jīng)存在，在該類型的現(xiàn)有數(shù)據(jù)將被替換。

event.dataTransfer.setData("text/plain", "Text to drag");

上面代碼為事件加入純文本格式的數(shù)據(jù)。

如果拖拉文本框或者拖拉選中的文本，會默認將文本數(shù)據(jù)添加到dataTransfer屬性，不用手動指定。

<div draggable="true" ondragstart="
  event.dataTransfer.setData('text/plain', 'bbb')">
  aaa
</div>

上面代碼中，拖拉數(shù)據(jù)實際上是bbb，而不是aaa。

下面是添加其他類型的數(shù)據(jù)。由于text/plain是最普遍支持的格式，為了保證兼容性，建議最后總是將數(shù)據(jù)保存一份純文本的格式。

var dt = event.dataTransfer;

// 添加鏈接
dt.setData("text/uri-list", "http://www.example.com");
dt.setData("text/plain", "http://www.example.com");
// 添加HTML代碼
dt.setData("text/html", "Hello there, <strong>stranger</strong>");
dt.setData("text/plain", "Hello there, <strong>stranger</strong>");
// 添加圖像的URL
dt.setData("text/uri-list", imageurl);
dt.setData("text/plain", imageurl);

可以一次提供多種格式的數(shù)據(jù)。

var dt = event.dataTransfer;
dt.setData("application/x-bookmark", bookmarkString);
dt.setData("text/uri-list", "http://www.example.com");
dt.setData("text/plain", "http://www.example.com");

上面代碼中，通過在同一個事件上面，存放三種類型的數(shù)據(jù)，使得拖拉事件可以在不同的對象上面，drop不同的值。注意，第一種格式是一個自定義格式，瀏覽器默認無法讀取，這意味著，只有某個部署了特定代碼的節(jié)點，才可能drop（讀取到）這個數(shù)據(jù)。

（2）getData()

getData方法接受一個字符串（表示數(shù)據(jù)類型）作為參數(shù)，返回事件所帶的指定類型的數(shù)據(jù)（通常是用setData方法添加的數(shù)據(jù)）。如果指定類型的數(shù)據(jù)不存在，則返回空字符串。通常只有drop事件觸發(fā)后，才能取出數(shù)據(jù)。如果取出另一個域名存放的數(shù)據(jù)，將會報錯。

下面是一個drop事件的監(jiān)聽函數(shù)，用來取出指定類型的數(shù)據(jù)。

function onDrop(event){
  var data = event.dataTransfer.getData("text/plain");
  event.target.textContent = data;
  event.preventDefault();
}

上面代碼取出拖拉事件的文本數(shù)據(jù)，將其替換成當(dāng)前節(jié)點的文本內(nèi)容。注意，這時還必須取消瀏覽器的默認行為，因為假如用戶拖拉的是一個鏈接，瀏覽器默認會在當(dāng)前窗口打開這個鏈接。

getData方法返回的是一個字符串，如果其中包含多項數(shù)據(jù)，就必須手動解析。

function doDrop(event){
  var lines = event.dataTransfer.getData("text/uri-list").split("\n");
  for (let line of lines) {
    let link = document.createElement("a");
    link.href = line;
    link.textContent = line;
    event.target.appendChild(link);
  }
  event.preventDefault();
}

上面代碼中，getData方法返回的是一組鏈接，就必須自行解析。

類型值指定為URL，可以取出第一個有效鏈接。

var link = event.dataTransfer.getData("URL");

下面是一次性取出多種類型的數(shù)據(jù)。

function doDrop(event){
  var types = event.dataTransfer.types;
  var supportedTypes = ["text/uri-list", "text/plain"];
  types = supportedTypes.filter(function (value) types.includes(value));
  if (types.length)
    var data = event.dataTransfer.getData(types[0]);
  event.preventDefault();
}

（3）clearData()

clearData方法接受一個字符串（表示數(shù)據(jù)類型）作為參數(shù)，刪除事件所帶的指定類型的數(shù)據(jù)。如果沒有指定類型，則刪除所有數(shù)據(jù)。如果指定類型不存在，則原數(shù)據(jù)不受影響。

event.dataTransfer.clearData("text/uri-list");

上面代碼清除事件所帶的URL數(shù)據(jù)。

（4）setDragImage()

拖動過程中（dragstart事件觸發(fā)后），瀏覽器會顯示一張圖片跟隨鼠標(biāo)一起移動，表示被拖動的節(jié)點。這張圖片是自動創(chuàng)造的，通常顯示為被拖動節(jié)點的外觀，不需要自己動手設(shè)置。setDragImage方法可以用來自定義這張圖片，它接受三個參數(shù)，第一個是img圖片元素或者canvas元素，如果省略或為null則使用被拖動的節(jié)點的外觀，第二個和第三個參數(shù)為鼠標(biāo)相對于該圖片左上角的橫坐標(biāo)和右坐標(biāo)。

下面是一個例子。

// 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對象表示觸摸點（一根手指或者一根觸摸筆），用來描述觸摸動作，包括位置、大小、形狀、壓力、目標(biāo)元素等屬性。有時，觸摸動作由多個觸摸點（多根手指或者多根觸摸筆）組成，多個觸摸點的集合由TouchList對象表示。TouchEvent對象代表由觸摸引發(fā)的事件，只有觸摸屏才會引發(fā)這一類事件。

很多時候，觸摸事件和鼠標(biāo)事件同時觸發(fā)，即使這個時候并沒有用到鼠標(biāo)。這是為了讓那些只定義鼠標(biāo)事件、沒有定義觸摸事件的代碼，在觸摸屏的情況下仍然能用。如果想避免這種情況，可以用preventDefault方法阻止發(fā)出鼠標(biāo)事件。

7. Touch對象

Touch對象代表一個觸摸點。觸摸點可能是一根手指，也可能是一根觸摸筆。它有以下屬性。

（1）identifier

identifier屬性表示Touch實例的獨一無二的識別符。它在整個觸摸過程中保持不變。

var id = touchItem.identifier;

TouchList對象的identifiedTouch方法，可以根據(jù)這個屬性，從一個集合里面取出對應(yīng)的Touch對象。

（2）screenX，screenY，clientX，clientY，pageX，pageY

screenX屬性和screenY屬性，分別表示觸摸點相對于屏幕左上角的橫坐標(biāo)和縱坐標(biāo)，與頁面是否滾動無關(guān)。

clientX屬性和clientY屬性，分別表示觸摸點相對于瀏覽器視口左上角的橫坐標(biāo)和縱坐標(biāo)，與頁面是否滾動無關(guān)。

pageX屬性和pageY屬性，分別表示觸摸點相對于當(dāng)前頁面左上角的橫坐標(biāo)和縱坐標(biāo)，包含了頁面滾動帶來的位移。

（3）radiusX，radiusY，rotationAngle

radiusX屬性和radiusY屬性，分別返回觸摸點周圍受到影響的橢圓范圍的X軸和Y軸，單位為像素。

rotationAngle屬性表示觸摸區(qū)域的橢圓的旋轉(zhuǎn)角度，單位為度數(shù)，在0到90度之間。

上面這三個屬性共同定義了用戶與屏幕接觸的區(qū)域，對于描述手指這一類非精確的觸摸，很有幫助。指尖接觸屏幕，觸摸范圍會形成一個橢圓，這三個屬性就用來描述這個橢圓區(qū)域。

（4）force

force屬性返回一個0到1之間的數(shù)值，表示觸摸壓力。0代表沒有壓力，1代表硬件所能識別的最大壓力。

（5）target

target屬性返回一個Element節(jié)點，代表觸摸發(fā)生的那個節(jié)點。

7.2 TouchList對象

TouchList對象是一個類似數(shù)組的對象，成員是與某個觸摸事件相關(guān)的所有觸摸點。比如，用戶用三根手指觸摸，產(chǎn)生的TouchList對象就有三個成員，每根手指對應(yīng)一個Touch對象。

TouchList實例的length屬性，返回TouchList對象的成員數(shù)量。

TouchList實例的identifiedTouch方法和item方法，分別使用id屬性和索引值（從0開始）作為參數(shù)，取出指定的Touch對象。

7.3 TouchEvent對象

TouchEvent對象繼承Event對象和UIEvent對象，表示觸摸引發(fā)的事件。除了被繼承的屬性以外，它還有一些自己的屬性。

（1）鍵盤相關(guān)屬性

以下屬性都為只讀屬性，返回一個布爾值，表示觸摸的同時，是否按下某個鍵。

• altKey 是否按下alt鍵
• ctrlKey 是否按下ctrl鍵
• metaKey 是否按下meta鍵
• shiftKey 是否按下shift鍵

（2）changedTouches

changedTouches屬性返回一個TouchList對象，包含了由當(dāng)前觸摸事件引發(fā)的所有Touch對象（即相關(guān)的觸摸點）。

對于touchstart事件，它代表被激活的觸摸點；對于touchmove事件，代表發(fā)生變化的觸摸點；對于touchend事件，代表消失的觸摸點（即不再被觸碰的點）。

var touches = touchEvent.changedTouches;

（3）targetTouches

targetTouches屬性返回一個TouchList對象，包含了觸摸的目標(biāo)Element節(jié)點內(nèi)部，所有仍然處于活動狀態(tài)的觸摸點。

var touches = touchEvent.targetTouches;

（4）touches

touches屬性返回一個TouchList對象，包含了所有仍然處于活動狀態(tài)的觸摸點。

var touches = touchEvent.touches;

7.4 觸摸事件的種類

觸摸引發(fā)的事件，有以下幾類。可以通過TouchEvent.type屬性，查看到底發(fā)生的是哪一種事件。

• touchstart：用戶接觸觸摸屏?xí)r觸發(fā)，它的target屬性返回發(fā)生觸摸的Element節(jié)點。

• touchend：用戶不再接觸觸摸屏?xí)r（或者移出屏幕邊緣時）觸發(fā)，它的target屬性與touchstart事件的target屬性是一致的，它的changedTouches屬性返回一個TouchList對象，包含所有不再觸摸的觸摸點（Touch對象）。

• touchmove：用戶移動觸摸點時觸發(fā)，它的target屬性與touchstart事件的target屬性一致。如果觸摸的半徑、角度、力度發(fā)生變化，也會觸發(fā)該事件。

• touchcancel：觸摸點取消時觸發(fā)，比如在觸摸區(qū)域跳出一個情態(tài)窗口（modal window）、觸摸點離開了文檔區(qū)域（進入瀏覽器菜單欄區(qū)域）、用戶放置更多的觸摸點（自動取消早先的觸摸點）。

下面是一個例子。

var el = document.getElementsByTagName("canvas")[0];
el.addEventListener("touchstart", handleStart, false);
el.addEventListener("touchmove", handleMove, false);

function handleStart(evt) {
  // 阻止瀏覽器繼續(xù)處理觸摸事件，
  // 也阻止發(fā)出鼠標(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);
  }
}

8.1 Input事件，select事件，change事件

以下事件與表單成員的值變化有關(guān)。

（1）input事件

input事件當(dāng)<input>、<textarea>的值發(fā)生變化時觸發(fā)。此外，打開contenteditable屬性的元素，只要值發(fā)生變化，也會觸發(fā)input事件。

input事件的一個特點，就是會連續(xù)觸發(fā)，比如用戶每次按下一次按鍵，就會觸發(fā)一次input事件。

（2）select事件

select事件當(dāng)在<input>、<textarea>中選中文本時觸發(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)<input>、<select>、<textarea>的值發(fā)生變化時觸發(fā)。它與input事件的最大不同，就是不會連續(xù)觸發(fā)，只有當(dāng)全部修改完成時才會觸發(fā)，而且input事件必然會引發(fā)change事件。具體來說，分成以下幾種情況。

• 激活單選框（radio）或復(fù)選框（checkbox）時觸發(fā)。
• 用戶提交時觸發(fā)。比如，從下列列表（select）完成選擇，在日期或文件輸入框完成選擇。
• 當(dāng)文本框或textarea元素的值發(fā)生改變，并且喪失焦點時觸發(fā)。

下面是一個例子。

// HTML代碼為
// <select size="1" onchange="changeEventHandler(event);">
//   <option>chocolate</option>
//   <option>strawberry</option>
//   <option>vanilla</option>
// </select>

function changeEventHandler(event) {
  console.log('You like ' + event.target.value + ' ice cream.');
}

8.2 reset事件，submit事件

以下事件發(fā)生在表單對象上，而不是發(fā)生在表單的成員上。

（1）reset事件

reset事件當(dāng)表單重置（所有表單成員變回默認值）時觸發(fā)。

（2）submit事件

submit事件當(dāng)表單數(shù)據(jù)向服務(wù)器提交時觸發(fā)。注意，submit事件的發(fā)生對象是form元素，而不是button元素（即使它的類型是submit），因為提交的是表單，而不是按鈕。

9.1 beforeunload事件，unload事件，load事件，error事件，pageshow事件，pagehide事件

以下事件與網(wǎng)頁的加載與卸載相關(guān)。

（1）beforeunload事件

beforeunload事件在窗口將要關(guān)閉，或者網(wǎng)頁（即document對象）將要卸載時觸發(fā)。它可以用來防止用戶不小心關(guān)閉網(wǎng)頁。

根據(jù)標(biāo)準(zhǔn)，只要在該事件的回調(diào)函數(shù)中，調(diào)用了event.preventDefault()，或者event.returnValue屬性的值是一個非空的值，就會自動跳出一個確認框，讓用戶確認是否關(guān)閉網(wǎng)頁。如果用戶點擊“取消”按鈕，網(wǎng)頁就不會關(guān)閉。event.returnValue屬性的值，會顯示在確認對話框之中。

window.addEventListener('beforeunload', function( event ) {
  event.returnValue = '你確認要離開嗎？';
});

window.addEventListener('beforeunload', function( event ) {
  event.preventDefault();
});

但是，瀏覽器的行為很不一致，Chrome就不遵守event.preventDefault()，還是會關(guān)閉窗口，而IE需要顯式返回一個非空的字符串。而且，大多數(shù)瀏覽器在對話框中不顯示指定文本，只顯示默認文本。因此，可以采用下面的寫法，取得最大的兼容性。

window.addEventListener('beforeunload', function (e) {
  var confirmationMessage = '確認關(guān)閉窗口？';

  e.returnValue = confirmationMessage;
  return confirmationMessage;
});

需要特別注意的是，許多手機瀏覽器默認忽視這個事件，而桌面瀏覽器也可以這樣設(shè)置，所以這個事件有可能根本不生效。所以，不能依賴它來阻止用戶關(guān)閉窗口。

（2）unload事件

unload事件在窗口關(guān)閉或者document對象將要卸載時觸發(fā)，發(fā)生在window、body、frameset等對象上面。它的觸發(fā)順序排在beforeunload、pagehide事件后面。unload事件只在頁面沒有被瀏覽器緩存時才會觸發(fā)，換言之，如果通過按下“前進/后退”導(dǎo)致頁面卸載，并不會觸發(fā)unload事件。

當(dāng)unload事件發(fā)生時，document對象處于一個特殊狀態(tài)。所有資源依然存在，但是對用戶來說都不可見，UI互動（window.open、alert、confirm方法等）全部無效。這時即使拋出錯誤，也不能停止文檔的卸載。

window.addEventListener('unload', function(event) {
  console.log('文檔將要卸載');
});

如果在window對象上定義了該事件，網(wǎng)頁就不會被瀏覽器緩存。

（3）load事件，error事件

load事件在頁面加載成功時觸發(fā)，error事件在頁面加載失敗時觸發(fā)。注意，頁面從瀏覽器緩存加載，并不會觸發(fā)load事件。

這兩個事件實際上屬于進度事件，不僅發(fā)生在document對象，還發(fā)生在各種外部資源上面。瀏覽網(wǎng)頁就是一個加載各種資源的過程，圖像（image）、樣式表（style sheet）、腳本（script）、視頻（video）、音頻（audio）、Ajax請求（XMLHttpRequest）等等。這些資源和document對象、window對象、XMLHttpRequestUpload對象，都會觸發(fā)load事件和error事件。

（4）pageshow事件，pagehide事件

默認情況下，瀏覽器會在當(dāng)前會話（session）緩存頁面，當(dāng)用戶點擊“前進/后退”按鈕時，瀏覽器就會從緩存中加載頁面。

pageshow事件在頁面加載時觸發(fā)，包括第一次加載和從緩存加載兩種情況。如果要指定頁面每次加載（不管是不是從瀏覽器緩存）時都運行的代碼，可以放在這個事件的監(jiān)聽函數(shù)。

第一次加載時，它的觸發(fā)順序排在load事件后面。從緩存加載時，load事件不會觸發(fā)，因為網(wǎng)頁在緩存中的樣子通常是load事件的監(jiān)聽函數(shù)運行后的樣子，所以不必重復(fù)執(zhí)行。同理，如果是從緩存中加載頁面，網(wǎng)頁內(nèi)初始化的JavaScript腳本（比如DOMContentLoaded事件的監(jiān)聽函數(shù)）也不會執(zhí)行。

window.addEventListener('pageshow', function(event) {
  console.log('pageshow: ', event);
});

pageshow事件有一個persisted屬性，返回一個布爾值。頁面第一次加載時，這個屬性是false；當(dāng)頁面從緩存加載時，這個屬性是true。

window.addEventListener('pageshow', function(event){
  if (event.persisted) {
    // ...
  }
});

pagehide事件與pageshow事件類似，當(dāng)用戶通過“前進/后退”按鈕，離開當(dāng)前頁面時觸發(fā)。它與unload事件的區(qū)別在于，如果在window對象上定義unload事件的監(jiān)聽函數(shù)之后，頁面不會保存在緩存中，而使用pagehide事件，頁面會保存在緩存中。

pagehide事件的event對象有一個persisted屬性，將這個屬性設(shè)為true，就表示頁面要保存在緩存中；設(shè)為false，表示網(wǎng)頁不保存在緩存中，這時如果設(shè)置了unload事件的監(jiān)聽函數(shù)，該函數(shù)將在pagehide事件后立即運行。

如果頁面包含frame或iframe元素，則frame頁面的pageshow事件和pagehide事件，都會在主頁面之前觸發(fā)。

9.2 DOMContentLoaded事件，readystatechange事件

以下事件與文檔狀態(tài)相關(guān)。

（1）DOMContentLoaded事件

當(dāng)HTML文檔下載并解析完成以后，就會在document對象上觸發(fā)DOMContentLoaded事件。這時，僅僅完成了HTML文檔的解析（整張頁面的DOM生成），所有外部資源（樣式表、腳本、iframe等等）可能還沒有下載結(jié)束。也就是說，這個事件比load事件，發(fā)生時間早得多。

document.addEventListener("DOMContentLoaded", function(event) {
  console.log("DOM生成");
});

注意，網(wǎng)頁的JavaScript腳本是同步執(zhí)行的，所以定義DOMContentLoaded事件的監(jiān)聽函數(shù)，應(yīng)該放在所有腳本的最前面。否則腳本一旦發(fā)生堵塞，將推遲觸發(fā)DOMContentLoaded事件。

（2）readystatechange事件

readystatechange事件發(fā)生在Document對象和XMLHttpRequest對象，當(dāng)它們的readyState屬性發(fā)生變化時觸發(fā)。

document.onreadystatechange = function () {
  if (document.readyState == "interactive") {
    // ...
  }
}

IE8不支持DOMContentLoaded事件，但是支持這個事件。因此，可以使用readystatechange事件，在低版本的IE中代替DOMContentLoaded事件。

9.3 scroll事件，resize事件

以下事件與窗口行為有關(guān)。

（1）scroll事件

scroll事件在文檔或文檔元素滾動時觸發(fā)，主要出現(xiàn)在用戶拖動滾動條。

window.addEventListener('scroll', callback);

由于該事件會連續(xù)地大量觸發(fā)，所以它的監(jiān)聽函數(shù)之中不應(yīng)該有非常耗費計算的操作。推薦的做法是使用requestAnimationFrame或setTimeout控制該事件的觸發(fā)頻率，然后可以結(jié)合customEvent拋出一個新事件。

(function() {
  var throttle = function(type, name, obj) {
    var obj = obj || window;
    var running = false;
    var func = function() {
      if (running) { return; }
      running = true;
      requestAnimationFrame(function() {
        obj.dispatchEvent(new CustomEvent(name));
        running = false;
      });
    };
    obj.addEventListener(type, func);
  };

  // 將scroll事件重定義為optimizedScroll事件
  throttle('scroll', 'optimizedScroll');
})();

window.addEventListener('optimizedScroll', function() {
  console.log("Resource conscious scroll callback!");
});

上面代碼中，throttle函數(shù)用于控制事件觸發(fā)頻率，requestAnimationFrame方法保證每次頁面重繪（每秒60次），只會觸發(fā)一次scroll事件的監(jiān)聽函數(shù)。也就是說，上面方法將scroll事件的觸發(fā)頻率，限制在每秒60次。

改用setTimeout方法，可以放置更大的時間間隔。

(function() {
  window.addEventListener('scroll', scrollThrottler, false);

  var scrollTimeout;
  function scrollThrottler() {
    if (!scrollTimeout) {
      scrollTimeout = setTimeout(function() {
        scrollTimeout = null;
        actualScrollHandler();
      }, 66);
    }
  }

  function actualScrollHandler() {
    // ...
  }
}());

上面代碼中，setTimeout指定scroll事件的監(jiān)聽函數(shù)，每66毫秒觸發(fā)一次（每秒15次）。

下面是一個更一般的throttle函數(shù)的寫法。

function throttle(fn, wait) {
  var time = Date.now();
  return function() {
    if ((time + wait - Date.now()) < 0) {
      fn();
      time = Date.now();
    }
  }
}

window.addEventListener('scroll', throttle(callback, 1000));

上面的代碼將scroll事件的觸發(fā)頻率，限制在一秒一次。

lodash函數(shù)庫提供了現(xiàn)成的throttle函數(shù)，可以直接引用。

window.addEventListener('scroll', _.throttle(callback, 1000));

（2）resize事件

resize事件在改變?yōu)g覽器窗口大小時觸發(fā)，發(fā)生在window、body、frameset對象上面。

var resizeMethod = function(){
  if (document.body.clientWidth < 768) {
    console.log('移動設(shè)備');
  }
};

window.addEventListener("resize", resizeMethod, true);

該事件也會連續(xù)地大量觸發(fā)，所以最好像上面的scroll事件一樣，通過throttle函數(shù)控制事件觸發(fā)頻率。

9.4 hashchange事件，popstate事件

以下事件與文檔的URL變化相關(guān)。

（1）hashchange事件

hashchange事件在URL的hash部分（即#號后面的部分，包括#號）發(fā)生變化時觸發(fā)。如果老式瀏覽器不支持該屬性，可以通過定期檢查location.hash屬性，模擬該事件，下面就是代碼。

(function(window) {
  if ( "onhashchange" in window.document.body ) { return; }

  var location = window.location;
  var oldURL = location.href;
  var oldHash = location.hash;

  // 每隔100毫秒檢查一下URL的hash
  setInterval(function() {
    var newURL = location.href;
    var newHash = location.hash;

    if ( newHash != oldHash && typeof window.onhashchange === "function" ) {
      window.onhashchange({
        type: "hashchange",
        oldURL: oldURL,
        newURL: newURL
      });

      oldURL = newURL;
      oldHash = newHash;
    }
  }, 100);

})(window);

hashchange事件對象除了繼承Event對象，還有oldURL屬性和newURL屬性，分別表示變化前后的URL。

（2）popstate事件

popstate事件在瀏覽器的history對象的當(dāng)前記錄發(fā)生顯式切換時觸發(fā)。注意，調(diào)用history.pushState()或history.replaceState()，并不會觸發(fā)popstate事件。該事件只在用戶在history記錄之間顯式切換時觸發(fā)，比如鼠標(biāo)點擊“后退/前進”按鈕，或者在腳本中調(diào)用history.back()、history.forward()、history.go()時觸發(fā)。

該事件對象有一個state屬性，保存history.pushState方法和history.replaceState方法為當(dāng)前記錄添加的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方法替換掉當(dāng)前記錄。因此，連續(xù)兩次back方法，會讓當(dāng)前條目退回到原始網(wǎng)址，它沒有附帶state對象，所以事件的state屬性為null，然后前進兩條記錄，又回到replaceState方法添加的記錄。

瀏覽器對于頁面首次加載，是否觸發(fā)popstate事件，處理不一樣，F(xiàn)irefox不觸發(fā)該事件。

cut事件，copy事件，paste事件

以下三個事件屬于文本操作觸發(fā)的事件。

• cut事件：在將選中的內(nèi)容從文檔中移除，加入剪貼板后觸發(fā)。

• copy事件：在選中的內(nèi)容加入剪貼板后觸發(fā)。

• paste事件：在剪貼板內(nèi)容被粘貼到文檔后觸發(fā)。

這三個事件都有一個clipboardData只讀屬性。該屬性存放剪貼的數(shù)據(jù)，是一個DataTransfer對象，具體的API接口和操作方法，請參見《觸摸事件》的DataTransfer對象章節(jié)。

焦點事件

焦點事件發(fā)生在Element節(jié)點和document對象上面，與獲得或失去焦點相關(guān)。它主要包括以下四個事件。

• focus事件：Element節(jié)點獲得焦點后觸發(fā)，該事件不會冒泡。

• blur事件：Element節(jié)點失去焦點后觸發(fā)，該事件不會冒泡。

• focusin事件：Element節(jié)點將要獲得焦點時觸發(fā)，發(fā)生在focus事件之前。該事件會冒泡。Firefox不支持該事件。

• focusout事件：Element節(jié)點將要失去焦點時觸發(fā)，發(fā)生在blur事件之前。該事件會冒泡。Firefox不支持該事件。

這四個事件的事件對象，帶有target屬性（返回事件的目標(biāo)節(jié)點）和relatedTarget屬性（返回一個Element節(jié)點）。對于focusin事件，relatedTarget屬性表示失去焦點的節(jié)點；對于focusout事件，表示將要接受焦點的節(jié)點；對于focus和blur事件，該屬性返回null。

由于focus和blur事件不會冒泡，只能在捕獲階段觸發(fā)，所以addEventListener方法的第三個參數(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è)置表單的文本輸入框，在接受焦點時設(shè)置背景色，在失去焦點時去除背景色。

瀏覽器提供一個FocusEvent構(gòu)造函數(shù)，可以用它生成焦點事件的實例。

var focusEvent = new FocusEvent(typeArg, focusEventInit);

上面代碼中，F(xiàn)ocusEvent構(gòu)造函數(shù)的第一個參數(shù)為事件類型，第二個參數(shù)是可選的配置對象，用來配置FocusEvent對象。