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

一、鼠標(biāo)事件

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

1.1、click事件，dblclick事件

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

“鼠標(biāo)單擊”定義為，用戶在同一位置完成一次mousedown動作和mouseup動作。它們的觸發(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);

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

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

mousedown事件在按下鼠標(biāo)鍵時(shí)觸發(fā)。
mouseup事件在釋放按下的鼠標(biāo)鍵時(shí)觸發(fā)。
mousemove事件當(dāng)鼠標(biāo)在一個(gè)節(jié)點(diǎn)內(nèi)部移動時(shí)觸發(fā)。當(dāng)鼠標(biāo)持續(xù)移動時(shí)，該事件會連續(xù)觸發(fā)。為了避免性能問題，建議對該事件的監(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)部移動，mouseover事件會在子節(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)以后，該事件只會觸發(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)上移動，該事件會觸發(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事件會冒泡，mouseleave事件不會。子節(jié)點(diǎn)的mouseout事件會冒泡到父節(jié)點(diǎn)，進(jìn)而觸發(fā)父節(jié)點(diǎn)的mouseout事件。mouseleave事件就沒有這種效果，所以離開子節(jié)點(diǎn)時(shí)，不會觸發(fā)父節(jié)點(diǎn)的監(jiān)聽函數(shù)。

1.5、contextmenu事件

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

二、MouseEvent對象

2.1、概述

2.1、概述

2.1、概述

2.1、概述

2.1、概述

三、wheel事件

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

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

• deltaX：返回一個(gè)數(shù)值，表示滾輪的水平滾動量。

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

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

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

四、鍵盤事件

五、進(jìn)度事件

六、拖拉事件

七、觸摸事件

觸摸API由三個(gè)對象組成。

Touch
TouchList
TouchEvent

八、表單事件

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

以下事件與表單成員的值變化有關(guān)。
（1）、input事件
input事件當(dāng)<input>、<textarea>的值發(fā)生變化時(shí)會觸發(fā)。此外，打開contenteditable屬性的元素，只要值發(fā)生變化，也會觸發(fā)input事件。

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

（2）、select事件
select事件當(dāng)在<input>、<textarea>中選中文本時(shí)觸發(fā)。

（3）、Change事件
Change事件當(dāng)<input>、<select>、<textarea>的值發(fā)生變化時(shí)觸發(fā)。它與input事件的最大不同，就是不會連續(xù)觸發(fā)，只有當(dāng)全部修改完成時(shí)才會觸發(fā)，而且input事件必然會引發(fā)Change事件。

8.2、reset事件，submit事件

以下事件發(fā)生在表單對象上，而不是發(fā)生在表單的成員上。
（1）、reset事件
reset事件當(dāng)表單重置（所有表單成員變回默認(rèn)值）時(shí)觸發(fā)。

（2）、submit事件
submit事件當(dāng)表單數(shù)據(jù)向服務(wù)器提交時(shí)觸發(fā)。注意，submit事件的發(fā)生對象是form元素，而不是button元素（即使它的類型是submit），因?yàn)樘峤坏氖潜韱?，而不是按鈕。

九、文檔事件

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

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

（2）、unload事件

（3）、load事件，error事件

（4）、pageshow事件，pagehide事件

9.2、DOMContentLoaded事件，readystatechange事件

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

（1）、DOMContentLoaded事件

（2）、readystatechange事件

9.3、scroll事件，resize事件

以下事件與窗口行為有關(guān)。
（1）、scroll事件
scroll事件在文檔或文檔元素滾動時(shí)觸發(fā)，主要出現(xiàn)在用戶拖動滾動條。

window.addEventListener('scroll', callback);

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

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

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

9.4、hashchange事件，popstate事件

以下事件與文檔的URL變化相關(guān)。
（1）、hashchange事件

（2）、popstate事件

9.5、cut事件，copy事件，paste事件

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

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

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

9.6、焦點(diǎn)事件

以下事件與文檔的URL變化相關(guān)。
（1）、hashchange事件

（2）、popstate事件