中文字幕av一区二区三区人妻少妇 ,琪琪女色窝窝777777,av免费

本節介紹各種常見的瀏覽器事件。

鼠標事件

鼠標事件指與鼠標相關的事件，主要有以下一些。

click 事件，dblclick 事件

當用戶在Element節點、document節點、window對象上單擊鼠標（或者按下回車鍵）時，click事件觸發。

“鼠標單擊”定義為，用戶在同一個位置完成一次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  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事件當用戶在element、document、window對象上，雙擊鼠標時觸發。該事件會在mousedown、mouseup、click之后觸發。

mouseup 事件，mousedown 事件，mousemove 事件

mouseup事件在釋放按下的鼠標鍵時觸發。

mousedown事件在按下鼠標鍵時觸發。

mousemove事件當鼠標在一個節點內部移動時觸發。當鼠標持續移動時，該事件會連續觸發。為了避免性能問題，建議對該事件的監聽函數做一些限定，比如限定一段時間內只能運行一次代碼。

mouseover 事件，mouseenter 事件

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節點以后，該事件只會觸發一次
// event.target 是 ul 節點
test.addEventListener('mouseenter', function (event) {
  event.target.style.color = 'purple';
  setTimeout(function () {
    event.target.style.color = '';
  }, 500);
}, false);

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

mouseout 事件，mouseleave 事件

mouseout事件和mouseleave事件，都是鼠標離開一個節點時觸發。

兩者的區別是，mouseout事件會冒泡，mouseleave事件不會。子節點的mouseout事件會冒泡到父節點，進而觸發父節點的mouseout事件。mouseleave事件就沒有這種效果，所以離開子節點時，不會觸發父節點的監聽函數。

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屬性：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);
}

上面代碼中，點擊網頁會輸出是否同時按下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));
}

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

keydown
keypress
keydown
keypress
（重復以上過程）
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，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請求的過程、<img>、<audio>、<video>、<style>、<link>加載外部資源的過程。下載和上傳都會發生進度事件。

進度事件有以下幾種。

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 = 0.5;
  // 兼容Firefox
  event.dataTransfer.setData('text/plain', 'anything');
}, 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和dragover事件的監聽函數中設置，對于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事件當<input>、<textarea>的值發生變化時觸發。此外，打開contenteditable屬性的元素，只要值發生變化，也會觸發input事件。

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

（2）select事件

select事件當在<input>、<textarea>中選中文本時觸發。

// 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>、<select>、<textarea>的值發生變化時觸發。它與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()，或者event.returnValue屬性的值是一個非空的值，就會自動跳出一個確認框，讓用戶確認是否關閉網頁。如果用戶點擊“取消”按鈕，網頁就不會關閉。event.returnValue屬性的值，會顯示在確認對話框之中。

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

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

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

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

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

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

（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事件在文檔或文檔元素滾動時觸發，主要出現在用戶拖動滾動條。

window.addEventListener('scroll', callback);

由于該事件會連續地大量觸發，所以它的監聽函數之中不應該有非常耗費計算的操作。推薦的做法是使用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事件的監聽函數。也就是說，上面方法將scroll事件的觸發頻率，限制在每秒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事件的監聽函數，每66毫秒觸發一次（每秒15次）。

下面是一個更一般的throttle函數的寫法。

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事件的觸發頻率，限制在一秒一次。

lodash函數庫提供了現成的throttle函數，可以直接引用。

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

（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對象。

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

事件類型

鼠標事件

click 事件，dblclick 事件

mouseup 事件，mousedown 事件，mousemove 事件

mouseover 事件，mouseenter 事件

mouseout 事件，mouseleave 事件

contextmenu 事件

MouseEvent 對象

概述

altKey，ctrlKey，metaKey，shiftKey

button，buttons

clientX，clientY，movementX，movementY，screenX，screenY

relatedTarget

wheel事件

鍵盤事件

altKey，ctrlKey，metaKey，shiftKey

key，charCode

進度事件

拖拉事件

事件種類

DataTransfer對象概述

DataTransfer對象的屬性

DataTransfer對象的方法

觸摸事件

Touch對象

TouchList對象

TouchEvent對象

觸摸事件的種類

表單事件

Input事件，select事件，change事件

reset事件，submit事件

文檔事件

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

DOMContentLoaded事件，readystatechange事件

scroll事件，resize事件

hashchange事件，popstate事件

cut事件，copy事件，paste事件

焦點事件

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频