JavaScript 事件種類

目錄

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

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

1.1 click 事件，dblclick 事件

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

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

下面是一個(gè)設(shè)置click事件監(jiān)聽函數(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  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對(duì)象上，雙擊鼠標(biāo)時(shí)觸發(fā)。該事件會(huì)在mousedown、mouseup、click之后觸發(fā)。

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

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

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

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ā)。為了避免性能問題，建議對(duì)該事件的監(jiān)聽函數(shù)做一些限定，比如限定一段時(shí)間內(nèi)只能運(yùn)行一次代碼。

1.3 mouseover 事件，mouseenter 事件

mouseover事件和mouseenter事件，都是鼠標(biāo)進(jìn)入一個(gè)節(jié)點(diǎn)時(shí)觸發(fā)。

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

// 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ā)一次
// event.target 是 ul 節(jié)點(diǎn)
test.addEventListener('mouseenter', function (event) {
  event.target.style.color = 'purple';
  setTimeout(function () {
    event.target.style.color = '';
  }, 500);
}, false);

// 進(jìn)入test節(jié)點(diǎn)以后，只要在子Element節(jié)點(diǎn)上移動(dòng)，該事件會(huì)觸發(fā)多次
// event.target 是 li 節(jié)點(diǎn)
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)離開一個(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事件就沒有這種效果，所以離開子節(jié)點(diǎn)時(shí)，不會(huì)觸發(fā)父節(jié)點(diǎn)的監(jiān)聽函數(shù)。

1.5 contextmenu 事件

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

2.1 概述

鼠標(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表示沒有按鍵，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)剛剛離開的那個(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í)例的屬性。

2.2 altKey，ctrlKey，metaKey，shiftKey

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

• altKey屬性：Alt 鍵
• ctrlKey屬性：Ctrl 鍵
• metaKey屬性：Meta 鍵（Mac鍵盤是一個(gè)四瓣的小花，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);
}

上面代碼中，點(diǎn)擊網(wǎng)頁(yè)會(huì)輸出是否同時(shí)按下Alt鍵。

2.3 button，buttons

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

（1）button

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

• -1：沒有按下鍵。
• 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í)按下了哪些鍵。它用來處理同時(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）。

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

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

（1）clientX，clientY

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

clientY屬性返回鼠標(biāo)位置相對(duì)于瀏覽器窗口左上角的垂直坐標(biāo)，單位為像素，與頁(yè)面是否縱向滾動(dòng)無關(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"
  );
}

2.5 relatedTarget

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

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

下面是一個(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 + " 離開" + event.relatedTarget.id);
});
inner.addEventListener("mouseenter", function (){
  console.log('進(jìn)入' + event.target.id + " 離開" + event.relatedTarget.id);
});
inner.addEventListener("mouseout", function (){
  console.log('離開' + event.target.id + " 進(jìn)入" + event.relatedTarget.id);
});
inner.addEventListener("mouseleave", function (){
  console.log('離開' + event.target.id + " 進(jìn)入" + event.relatedTarget.id);
});

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

// 鼠標(biāo)從inner進(jìn)入outer，輸出
// 離開inner 進(jìn)入outer
// 離開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ù)，可以用來生成滾輪事件的實(shí)例。它接受兩個(gè)參數(shù)，第一個(gè)是事件名稱，第二個(gè)是配置對(duì)象。

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

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

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

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

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

下面是一個(gè)例子，對(duì)文本框設(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));
}

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

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

鍵盤事件使用KeyboardEvent對(duì)象表示，該對(duì)象繼承了UIEvent和MouseEvent對(duì)象。瀏覽器提供KeyboardEvent構(gòu)造函數(shù)，用來新建鍵盤事件的實(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í)例的屬性介紹。

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

4.2 key，charCode

key屬性返回一個(gè)字符串，表示按下的鍵名。如果同時(shí)按下一個(gè)控制鍵和一個(gè)符號(hào)鍵，則返回符號(hào)鍵的鍵名。比如，按下Ctrl+a，則返回a。如果無法識(shí)別鍵名，則返回字符串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屬性返回一個(gè)數(shù)值，表示keypress事件按鍵的Unicode值，keydown和keyup事件不提供這個(gè)屬性。注意，該屬性已經(jīng)從標(biāo)準(zhǔn)移除，雖然瀏覽器還支持，但應(yīng)該盡量不使用。

進(jìn)度事件用來描述一個(gè)事件進(jìn)展的過程，比如XMLHttpRequest對(duì)象發(fā)出的HTTP請(qǐng)求的過程、<img>、<audio>、<video>、<style>、<link>加載外部資源的過程。下載和上傳都會(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)致資源無法加載時(shí)觸發(fā)。

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

• loadstart事件：進(jìn)度開始時(shí)觸發(fā)。

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

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

• timeout事件：進(jìn)度超過限時(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)聽函數(shù)根本不會(huì)被執(zhí)行。所以，比較可靠的方式，是用complete屬性先判斷一下是否加載完成。

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

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

由于DOM沒有提供像complete屬性那樣的，判斷是否發(fā)生加載錯(cuò)誤的屬性，所以error事件的監(jiān)聽函數(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)聽函數(shù)。

進(jìn)度事件使用ProgressEvent對(duì)象表示。ProgressEvent實(shí)例有以下屬性。

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

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

• 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('傳輸過程中發(fā)生錯(cuò)誤');
}

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)于進(jìn)度結(jié)束的原因，但可以用它來做所有進(jìn)度結(jié)束場(chǎng)景都需要做的一些操作。

另外，上面是下載過程的進(jìn)度事件，還存在上傳過程的進(jìn)度事件。這時(shí)所有監(jiān)聽函數(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ù)，用來生成進(jìn)度事件的實(shí)例。

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

上面代碼中，ProgressEvent構(gòu)造函數(shù)的第一個(gè)參數(shù)是事件類型（字符串），第二個(gè)參數(shù)是配置對(duì)象，用來指定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，就無法再用鼠標(biāo)選中該節(jié)點(diǎn)內(nèi)部的文字或子節(jié)點(diǎn)了。

6.1 事件種類

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

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

• dragstart事件：拖拉開始時(shí)在被拖拉的節(jié)點(diǎn)上觸發(fā)，該事件的target屬性是被拖拉的節(jié)點(diǎn)。通常應(yīng)該在這個(gè)事件的監(jiān)聽函數(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)聽函數(shù)中，指定是否允許在當(dāng)前節(jié)點(diǎn)放下（drop）拖拉的數(shù)據(jù)。如果當(dāng)前節(jié)點(diǎn)沒有該事件的監(jiān)聽函數(shù)，或者監(jiān)聽函數(shù)不執(zhí)行任何操作，就意味著不允許在當(dāng)前節(jié)點(diǎn)放下數(shù)據(jù)。在視覺上顯示拖拉進(jìn)入當(dāng)前節(jié)點(diǎn)，也是在這個(gè)事件的監(jiān)聽函數(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事件：拖拉離開當(dāng)前節(jié)點(diǎn)范圍時(shí)，在當(dāng)前節(jié)點(diǎn)上觸發(fā)，該事件的target屬性是當(dāng)前節(jié)點(diǎn)。在視覺上顯示拖拉離開當(dāng)前節(jié)點(diǎn)，就在這個(gè)事件的監(jiān)聽函數(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)上方松開鼠標(biāo)鍵，也不會(huì)觸發(fā)該事件。如果用戶按下Escape鍵，取消這個(gè)操作，也不會(huì)觸發(fā)該事件。該事件的監(jiān)聽函數(shù)負(fù)責(zé)取出拖拉數(shù)據(jù)，并進(jìn)行相關(guān)處理。

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

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

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

• dragenter和dragover事件的監(jiān)聽函數(shù)，用來指定可以放下（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屬性用來讀寫拖拉事件中傳輸?shù)臄?shù)據(jù)，詳見下文《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 = 0.5;
  // 兼容Firefox
  event.dataTransfer.setData('text/plain', 'anything');
}, 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ì)冒泡，所以要過濾節(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)上可以打開鏈接）
  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);

6.2 DataTransfer對(duì)象概述

所有的拖拉事件都有一個(gè)dataTransfer屬性，用來保存需要傳遞的數(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è)字符串。一般來說，如果拖拉一段文本，則數(shù)據(jù)默認(rèn)就是那段文本；如果拖拉一個(gè)鏈接，則數(shù)據(jù)默認(rèn)就是鏈接的URL。

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

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

6.3 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（無法放下被拖拉的節(jié)點(diǎn)）。設(shè)置除此以外的值，都是無效的。

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

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

鼠標(biāo)箭頭會(huì)根據(jù)dropEffect屬性改變形狀，提示目前正處于哪一種效果。這意味著，通過鼠標(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（無法放下被拖拉的節(jié)點(diǎn)）、uninitialized（默認(rèn)值，等同于all）。如果某種效果是不允許的，用戶就無法在目標(biāo)節(jié)點(diǎn)中達(dá)成這種效果。

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

event.dataTransfer.effectAllowed = "copy";

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

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

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

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

（3）files

files屬性是一個(gè)FileList對(duì)象，包含一組本地文件，可以用來在拖拉操作中傳送。如果本次拖拉不涉及文件，則屬性為空的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);

上面代碼中，通過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è)例子，通過檢查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)放下。

6.4 DataTransfer對(duì)象的方法

DataTransfer對(duì)象有以下方法。

（1）setData()

setData方法用來設(shè)置事件所帶有的指定類型的數(shù)據(jù)。它接受兩個(gè)參數(shù)，第一個(gè)是數(shù)據(jù)類型，第二個(gè)是具體數(shù)據(jù)。如果指定的類型在現(xiàn)有數(shù)據(jù)中不存在，則該類型將寫入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è)事件上面，存放三種類型的數(shù)據(jù)，使得拖拉事件可以在不同的對(duì)象上面，drop不同的值。注意，第一種格式是一個(gè)自定義格式，瀏覽器默認(rèn)無法讀取，這意味著，只有某個(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)聽函數(shù)，用來取出指定類型的數(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)前窗口打開這個(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ù)。如果沒有指定類型，則刪除所有數(shù)據(jù)。如果指定類型不存在，則原數(shù)據(jù)不受影響。

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

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

（4）setDragImage()

拖動(dòng)過程中（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方法可以用來自定義這張圖片，它接受三個(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)（一根手指或者一根觸摸筆），用來描述觸摸動(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í)候并沒有用到鼠標(biāo)。這是為了讓那些只定義鼠標(biāo)事件、沒有定義觸摸事件的代碼，在觸摸屏的情況下仍然能用。如果想避免這種情況，可以用preventDefault方法阻止發(fā)出鼠標(biāo)事件。

7. Touch對(duì)象

Touch對(duì)象代表一個(gè)觸摸點(diǎn)。觸摸點(diǎn)可能是一根手指，也可能是一根觸摸筆。它有以下屬性。

（1）identifier

identifier屬性表示Touch實(shí)例的獨(dú)一無二的識(shí)別符。它在整個(gè)觸摸過程中保持不變。

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)無關(guān)。

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

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

（3）radiusX，radiusY，rotationAngle

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

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

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

（4）force

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

（5）target

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

7.2 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開始）作為參數(shù)，取出指定的Touch對(duì)象。

7.3 TouchEvent對(duì)象

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

（1）鍵盤相關(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;

7.4 觸摸事件的種類

觸摸引發(fā)的事件，有以下幾類。可以通過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)離開了文檔區(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);
  }
}

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

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

（1）input事件

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

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

（2）select事件

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

• 激活單選框（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.');
}

8.2 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)樘峤坏氖潜韱?，而不是按鈕。

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

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

（1）beforeunload事件

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

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

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

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

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

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

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

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

（2）unload事件

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

當(dāng)unload事件發(fā)生時(shí)，document對(duì)象處于一個(gè)特殊狀態(tài)。所有資源依然存在，但是對(duì)用戶來說都不可見，UI互動(dòng)（window.open、alert、confirm方法等）全部無效。這時(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è)加載各種資源的過程，圖像（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)聽函數(shù)。

第一次加載時(shí)，它的觸發(fā)順序排在load事件后面。從緩存加載時(shí)，load事件不會(huì)觸發(fā)，因?yàn)榫W(wǎng)頁(yè)在緩存中的樣子通常是load事件的監(jiān)聽函數(shù)運(yùn)行后的樣子，所以不必重復(fù)執(zhí)行。同理，如果是從緩存中加載頁(yè)面，網(wǎng)頁(yè)內(nèi)初始化的JavaScript腳本（比如DOMContentLoaded事件的監(jiān)聽函數(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)用戶通過“前進(jìn)/后退”按鈕，離開當(dāng)前頁(yè)面時(shí)觸發(fā)。它與unload事件的區(qū)別在于，如果在window對(duì)象上定義unload事件的監(jiān)聽函數(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)聽函數(shù)，該函數(shù)將在pagehide事件后立即運(yùn)行。

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

9.2 DOMContentLoaded事件，readystatechange事件

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

（1）DOMContentLoaded事件

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

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

注意，網(wǎng)頁(yè)的JavaScript腳本是同步執(zhí)行的，所以定義DOMContentLoaded事件的監(jiān)聽函數(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事件。

9.3 scroll事件，resize事件

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

（1）scroll事件

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

window.addEventListener('scroll', callback);

由于該事件會(huì)連續(xù)地大量觸發(fā)，所以它的監(jiān)聽函數(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)聽函數(shù)。也就是說，上面方法將scroll事件的觸發(fā)頻率，限制在每秒60次。

改用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)聽函數(shù)，每66毫秒觸發(fā)一次（每秒15次）。

下面是一個(gè)更一般的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ù)庫(kù)提供了現(xiàn)成的throttle函數(shù)，可以直接引用。

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

（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事件一樣，通過throttle函數(shù)控制事件觸發(fā)頻率。

9.4 hashchange事件，popstate事件

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

（1）hashchange事件

hashchange事件在URL的hash部分（即#號(hào)后面的部分，包括#號(hào)）發(fā)生變化時(shí)觸發(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事件對(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)址，它沒有附帶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)參見《觸摸事件》的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ì)象，用來配置FocusEvent對(duì)象。