閱讀(18.5k) 書簽贊(0) 我要糾錯

JavaScript Event對象

2021-09-15 15:15 更新

事件是一種異步編程的實現(xiàn)方式，本質(zhì)上是程序各個組成部分之間傳遞的特定消息。DOM支持大量的事件，本節(jié)介紹DOM的事件編程。

EventTarget接口

EventTarget接口

DOM的事件操作（監(jiān)聽和觸發(fā)），都定義在EventTarget接口。Element節(jié)點、document節(jié)點和window對象，都部署了這個接口。此外，XMLHttpRequest、AudioNode、AudioContext等瀏覽器內(nèi)置對象，也部署了這個接口。

該接口就是三個方法，addEventListener和removeEventListener用于綁定和移除監(jiān)聽函數(shù)，dispatchEvent用于觸發(fā)事件。

addEventListener()

addEventListener方法用于在當(dāng)前節(jié)點或?qū)ο笊希x一個特定事件的監(jiān)聽函數(shù)。

target.addEventListener(type, listener[, useCapture]);

上面是使用格式，addEventListener方法接受三個參數(shù)。

type，事件名稱，大小寫不敏感。
listener，監(jiān)聽函數(shù)。指定事件發(fā)生時，會調(diào)用該監(jiān)聽函數(shù)。
useCapture，監(jiān)聽函數(shù)是否在捕獲階段（capture）觸發(fā)（參見后文《事件的傳播》部分）。該參數(shù)是一個布爾值，默認(rèn)為false（表示監(jiān)聽函數(shù)只在冒泡階段被觸發(fā)）。老式瀏覽器規(guī)定該參數(shù)必寫，較新版本的瀏覽器允許該參數(shù)可選。為了保持兼容，建議總是寫上該參數(shù)。

下面是一個例子。

function hello(){
  console.log('Hello world');
}

var button = document.getElementById("btn");
button.addEventListener('click', hello, false);

上面代碼中，addEventListener方法為button節(jié)點，綁定click事件的監(jiān)聽函數(shù)hello，該函數(shù)只在冒泡階段觸發(fā)。

可以使用addEventListener方法，為當(dāng)前對象的同一個事件，添加多個監(jiān)聽函數(shù)。這些函數(shù)按照添加順序觸發(fā)，即先添加先觸發(fā)。如果為同一個事件多次添加同一個監(jiān)聽函數(shù)，該函數(shù)只會執(zhí)行一次，多余的添加將自動被去除（不必使用removeEventListener方法手動去除）。

function hello(){
  console.log('Hello world');
}

document.addEventListener('click', hello, false);
document.addEventListener('click', hello, false);

執(zhí)行上面代碼，點擊文檔只會輸出一行“Hello world”。

如果希望向監(jiān)聽函數(shù)傳遞參數(shù)，可以用匿名函數(shù)包裝一下監(jiān)聽函數(shù)。

function print(x) {
  console.log(x);
}

var el = document.getElementById("div1");
el.addEventListener("click", function(){print('Hello')}, false);

上面代碼通過匿名函數(shù)，向監(jiān)聽函數(shù)print傳遞了一個參數(shù)。

removeEventListener()

removeEventListener方法用來移除addEventListener方法添加的事件監(jiān)聽函數(shù)。

div.addEventListener('click', listener, false);
div.removeEventListener('click', listener, false);

removeEventListener方法的參數(shù)，與addEventListener方法完全一致。它對第一個參數(shù)“事件類型”，也是大小寫不敏感。

注意，removeEventListener方法移除的監(jiān)聽函數(shù)，必須與對應(yīng)的addEventListener方法的參數(shù)完全一致，而且在同一個元素節(jié)點，否則無效。

dispatchEvent()

dispatchEvent方法在當(dāng)前節(jié)點上觸發(fā)指定事件，從而觸發(fā)監(jiān)聽函數(shù)的執(zhí)行。該方法返回一個布爾值，只要有一個監(jiān)聽函數(shù)調(diào)用了Event.preventDefault()，則返回值為false，否則為true。

target.dispatchEvent(event)

dispatchEvent方法的參數(shù)是一個Event對象的實例。

para.addEventListener('click', hello, false);
var event = new Event('click');
para.dispatchEvent(event);

上面代碼在當(dāng)前節(jié)點觸發(fā)了click事件。

如果dispatchEvent方法的參數(shù)為空，或者不是一個有效的事件對象，將報錯。

下面代碼根據(jù)dispatchEvent方法的返回值，判斷事件是否被取消了。

var canceled = !cb.dispatchEvent(event);
  if (canceled) {
    console.log('事件取消');
  } else {
    console.log('事件未取消');
  }
}

監(jiān)聽函數(shù)

監(jiān)聽函數(shù)（listener）是事件發(fā)生時，程序所要執(zhí)行的函數(shù)。它是事件驅(qū)動編程模式的主要編程方式。

DOM提供三種方法，可以用來為事件綁定監(jiān)聽函數(shù)。

HTML標(biāo)簽的on-屬性

HTML語言允許在元素標(biāo)簽的屬性中，直接定義某些事件的監(jiān)聽代碼。

<body onload="doSomething()">

<div onclick="console.log('觸發(fā)事件')">

上面代碼為body節(jié)點的load事件、div節(jié)點的click事件，指定了監(jiān)聽函數(shù)。

使用這個方法指定的監(jiān)聽函數(shù)，只會在冒泡階段觸發(fā)。

注意，使用這種方法時，on-屬性的值是“監(jiān)聽代碼”，而不是“監(jiān)聽函數(shù)”。也就是說，一旦指定事件發(fā)生，這些代碼是原樣傳入JavaScript引擎執(zhí)行。因此如果要執(zhí)行函數(shù)，必須在函數(shù)名后面加上一對圓括號。

另外，Element節(jié)點的setAttribue方法，其實設(shè)置的也是這種效果。

el.setAttribute('onclick', 'doSomething()');

Element節(jié)點的事件屬性

Element節(jié)點有事件屬性，可以定義監(jiān)聽函數(shù)。

window.onload = doSomething;

div.onclick = function(event){
  console.log('觸發(fā)事件');
};

使用這個方法指定的監(jiān)聽函數(shù)，只會在冒泡階段觸發(fā)。

addEventListener方法

通過Element節(jié)點、document節(jié)點、window對象的addEventListener方法，也可以定義事件的監(jiān)聽函數(shù)。

window.addEventListener('load', doSomething, false);

addEventListener方法的詳細(xì)介紹，參見本節(jié)EventTarget接口的部分。

在上面三種方法中，第一種“HTML標(biāo)簽的on-屬性”，違反了HTML與JavaScript代碼相分離的原則；第二種“Element節(jié)點的事件屬性”的缺點是，同一個事件只能定義一個監(jiān)聽函數(shù)，也就是說，如果定義兩次onclick屬性，后一次定義會覆蓋前一次。因此，這兩種方法都不推薦使用，除非是為了程序的兼容問題，因為所有瀏覽器都支持這兩種方法。

addEventListener是推薦的指定監(jiān)聽函數(shù)的方法。它有如下優(yōu)點：

可以針對同一個事件，添加多個監(jiān)聽函數(shù)。
能夠指定在哪個階段（捕獲階段還是冒泡階段）觸發(fā)回監(jiān)聽函數(shù)。
除了DOM節(jié)點，還可以部署在window、XMLHttpRequest等對象上面，等于統(tǒng)一了整個JavaScript的監(jiān)聽函數(shù)接口。

this對象的指向

實際編程中，監(jiān)聽函數(shù)內(nèi)部的this對象，常常需要指向觸發(fā)事件的那個Element節(jié)點。

addEventListener方法指定的監(jiān)聽函數(shù)，內(nèi)部的this對象總是指向觸發(fā)事件的那個節(jié)點。

// HTML代碼為
// <p id="para">Hello</p>

var id = 'doc';
var para = document.getElementById('para');

function hello(){
  console.log(this.id);
}

para.addEventListener('click', hello, false);

執(zhí)行上面代碼，點擊p節(jié)點會輸出para。這是因為監(jiān)聽函數(shù)被“拷貝”成了節(jié)點的一個屬性，使用下面的寫法，會看得更清楚。

para.onclick = hello;

如果將監(jiān)聽函數(shù)部署在Element節(jié)點的on-屬性上面，this不會指向觸發(fā)事件的元素節(jié)點。

<p id="para" onclick="hello()">Hello</p>
<!-- 或者使用JavaScript代碼  -->
<script>
  pElement.setAttribute('onclick', 'hello()');
</script>

執(zhí)行上面代碼，點擊p節(jié)點會輸出doc。這是因為這里只是調(diào)用hello函數(shù)，而hello函數(shù)實際是在全局作用域執(zhí)行，相當(dāng)于下面的代碼。

para.onclick = function(){
  hello();
}

一種解決方法是，不引入函數(shù)作用域，直接在on-屬性寫入所要執(zhí)行的代碼。因為on-屬性是在當(dāng)前節(jié)點上執(zhí)行的。

<p id="para" onclick="console.log(id)">Hello</p>
<!-- 或者 -->
<p id="para" onclick="console.log(this.id)">Hello</p>

上面兩行，最后輸出的都是para。

總結(jié)一下，以下寫法的this對象都指向Element節(jié)點。

// JavaScript代碼
element.onclick = print
element.addEventListener('click', print, false)
element.onclick = function () {console.log(this.id);}

// HTML代碼
<element onclick="console.log(this.id)">

以下寫法的this對象，都指向全局對象。

// JavaScript代碼
element.onclick = function (){ doSomething() };
element.setAttribute('onclick', 'doSomething()');

// HTML代碼
<element onclick="doSomething()">

事件的傳播

傳播的三個階段

當(dāng)一個事件發(fā)生以后，它會在不同的DOM節(jié)點之間傳播（propagation）。這種傳播分成三個階段：

第一階段：從window對象傳導(dǎo)到目標(biāo)節(jié)點，稱為“捕獲階段”（capture phase）。
第二階段：在目標(biāo)節(jié)點上觸發(fā)，稱為“目標(biāo)階段”（target phase）。
第三階段：從目標(biāo)節(jié)點傳導(dǎo)回window對象，稱為“冒泡階段”（bubbling phase）。

這種三階段的傳播模型，會使得一個事件在多個節(jié)點上觸發(fā)。比如，假設(shè)div節(jié)點之中嵌套一個p節(jié)點。

<div>
  <p>Click Me</p>
</div>

如果對這兩個節(jié)點的click事件都設(shè)定監(jiān)聽函數(shù)，則click事件會被觸發(fā)四次。

var phases = {
  1: 'capture',
  2: 'target',
  3: 'bubble'
};

var div = document.querySelector('div');
var p = document.querySelector('p');

div.addEventListener('click', callback, true);
p.addEventListener('click', callback, true);
div.addEventListener('click', callback, false);
p.addEventListener('click', callback, false);

function callback(event) {
  var tag = event.currentTarget.tagName;
  var phase = phases[event.eventPhase];
  console.log("Tag: '" + tag + "'. EventPhase: '" + phase + "'");
}

// 點擊以后的結(jié)果
// Tag: 'DIV'. EventPhase: 'capture'
// Tag: 'P'. EventPhase: 'target'
// Tag: 'P'. EventPhase: 'target'
// Tag: 'DIV'. EventPhase: 'bubble'

上面代碼表示，click事件被觸發(fā)了四次：p節(jié)點的捕獲階段和冒泡階段各1次，div節(jié)點的捕獲階段和冒泡階段各1次。

捕獲階段：事件從div向p傳播時，觸發(fā)div的click事件；
目標(biāo)階段：事件從div到達(dá)p時，觸發(fā)p的click事件；
目標(biāo)階段：事件離開p時，觸發(fā)p的click事件；
冒泡階段：事件從p傳回div時，再次觸發(fā)div的click事件。

注意，用戶點擊網(wǎng)頁的時候，瀏覽器總是假定click事件的目標(biāo)節(jié)點，就是點擊位置的嵌套最深的那個節(jié)點（嵌套在div節(jié)點的p節(jié)點）。

事件傳播的最上層對象是window，接著依次是document，html（document.documentElement）和body（document.dody）。也就是說，如果body元素中有一個div元素，點擊該元素。事件的傳播順序，在捕獲階段依次為window、document、html、body、div，在冒泡階段依次為div、body、html、document、window。

事件的代理

由于事件會在冒泡階段向上傳播到父節(jié)點，因此可以把子節(jié)點的監(jiān)聽函數(shù)定義在父節(jié)點上，由父節(jié)點的監(jiān)聽函數(shù)統(tǒng)一處理多個子元素的事件。這種方法叫做事件的代理（delegation）。

var ul = document.querySelector('ul');

ul.addEventListener('click', function(event) {
  if (event.target.tagName.toLowerCase() === 'li') {
    // some code
  }
});

上面代碼的click事件的監(jiān)聽函數(shù)定義在ul節(jié)點，但是實際上，它處理的是子節(jié)點li的click事件。這樣做的好處是，只要定義一個監(jiān)聽函數(shù)，就能處理多個子節(jié)點的事件，而且以后再添加子節(jié)點，監(jiān)聽函數(shù)依然有效。

如果希望事件到某個節(jié)點為止，不再傳播，可以使用事件對象的stopPropagation方法。

p.addEventListener('click', function(event) {
  event.stopPropagation();
});

使用上面的代碼以后，click事件在冒泡階段到達(dá)p節(jié)點以后，就不再向上（父節(jié)點的方向）傳播了。

但是，stopPropagation方法不會阻止p節(jié)點上的其他click事件的監(jiān)聽函數(shù)。如果想要不再觸發(fā)那些監(jiān)聽函數(shù)，可以使用stopImmediatePropagation方法。

p.addEventListener('click', function(event) {
 event.stopImmediatePropagation();
});

p.addEventListener('click', function(event) {
 // 不會被觸發(fā)
});

Event對象

事件發(fā)生以后，會生成一個事件對象，作為參數(shù)傳給監(jiān)聽函數(shù)。瀏覽器原生提供一個Event對象，所有的事件都是這個對象的實例，或者說繼承了Event.prototype對象。

Event對象本身就是一個構(gòu)造函數(shù)，可以用來生成新的實例。

event = new Event(typeArg, eventInit);

Event構(gòu)造函數(shù)接受兩個參數(shù)。第一個參數(shù)是字符串，表示事件的名稱；第二個參數(shù)是一個對象，表示事件對象的配置。該參數(shù)可以有以下兩個屬性。

bubbles：布爾值，可選，默認(rèn)為false，表示事件對象是否冒泡。
cancelable：布爾值，可選，默認(rèn)為false，表示事件是否可以被取消。

var ev = new Event("look", {"bubbles":true, "cancelable":false});
document.dispatchEvent(ev);

上面代碼新建一個look事件實例，然后使用dispatchEvent方法觸發(fā)該事件。

IE8及以下版本，事件對象不作為參數(shù)傳遞，而是通過window對象的event屬性讀取，并且事件對象的target屬性叫做srcElement屬性。所以，以前獲取事件信息，往往要寫成下面這樣。

function myEventHandler(event) {
  var actualEvent = event || window.event;
  var actualTarget = actualEvent.target || actualEvent.srcElement;
  // ...
}

上面的代碼只是為了說明以前的程序為什么這樣寫，在新代碼中，這樣的寫法不應(yīng)該再用了。

以下介紹Event實例的屬性和方法。

bubbles，eventPhase

以下屬性與事件的階段有關(guān)。

（1）bubbles

bubbles屬性返回一個布爾值，表示當(dāng)前事件是否會冒泡。該屬性為只讀屬性，只能在新建事件時改變。除非顯式聲明，Event構(gòu)造函數(shù)生成的事件，默認(rèn)是不冒泡的。

function goInput(e) {
  if (!e.bubbles) {
    passItOn(e);
  } else {
    doOutput(e);
  }
}

上面代碼根據(jù)事件是否冒泡，調(diào)用不同的函數(shù)。

（2）eventPhase

eventPhase屬性返回一個整數(shù)值，表示事件目前所處的節(jié)點。

var phase = event.eventPhase;

0，事件目前沒有發(fā)生。
1，事件目前處于捕獲階段，即處于從祖先節(jié)點向目標(biāo)節(jié)點的傳播過程中。該過程是從Window對象到Document節(jié)點，再到HTMLHtmlElement節(jié)點，直到目標(biāo)節(jié)點的父節(jié)點為止。
2，事件到達(dá)目標(biāo)節(jié)點，即target屬性指向的那個節(jié)點。
3，事件處于冒泡階段，即處于從目標(biāo)節(jié)點向祖先節(jié)點的反向傳播過程中。該過程是從父節(jié)點一直到Window對象。只有bubbles屬性為true時，這個階段才可能發(fā)生。

cancelable，defaultPrevented

以下屬性與事件的默認(rèn)行為有關(guān)。

（1）cancelable

cancelable屬性返回一個布爾值，表示事件是否可以取消。該屬性為只讀屬性，只能在新建事件時改變。除非顯式聲明，Event構(gòu)造函數(shù)生成的事件，默認(rèn)是不可以取消的。

var bool = event.cancelable;

如果要取消某個事件，需要在這個事件上面調(diào)用preventDefault方法，這會阻止瀏覽器對某種事件部署的默認(rèn)行為。

（2）defaultPrevented

defaultPrevented屬性返回一個布爾值，表示該事件是否調(diào)用過preventDefault方法。

if (e.defaultPrevented) {
  // ...
}

currentTarget，target

以下屬性與事件的目標(biāo)節(jié)點有關(guān)。

（1）currentTarget

currentTarget屬性返回事件當(dāng)前所在的節(jié)點，即正在執(zhí)行的監(jiān)聽函數(shù)所綁定的那個節(jié)點。作為比較，target屬性返回事件發(fā)生的節(jié)點。如果監(jiān)聽函數(shù)在捕獲階段和冒泡階段觸發(fā)，那么這兩個屬性返回的值是不一樣的。

function hide(e){
  console.log(this === e.currentTarget);  // true
  e.currentTarget.style.visibility = "hidden";
}

para.addEventListener('click', hide, false);

上面代碼中，點擊para節(jié)點，該節(jié)點會不可見。另外，在監(jiān)聽函數(shù)中，currentTarget屬性實際上等同于this對象。

（2）target

target屬性返回觸發(fā)事件的那個節(jié)點，即事件最初發(fā)生的節(jié)點。如果監(jiān)聽函數(shù)不在該節(jié)點觸發(fā)，那么它與currentTarget屬性返回的值是不一樣的。

function hide(e){
  console.log(this === e.target);  // 有可能不是true
  e.target.style.visibility = "hidden";
}

// HTML代碼為
// <p id="para">Hello <em>World</em></p>
para.addEventListener('click', hide, false);

上面代碼中，如果在para節(jié)點的em子節(jié)點上面點擊，則e.target指向em子節(jié)點，導(dǎo)致em子節(jié)點（即World部分）會不可見，且輸出false。

在IE6—IE8之中，該屬性的名字不是target，而是srcElement，因此經(jīng)常可以看到下面這樣的代碼。

function hide(e) {
  var target = e.target || e.srcElement;
  target.style.visibility = 'hidden';
}

type，detail，timeStamp，isTrusted

以下屬性與事件對象的其他信息相關(guān)。

（1）type

type屬性返回一個字符串，表示事件類型，具體的值同addEventListener方法和removeEventListener方法的第一個參數(shù)一致，大小寫不敏感。

var string = event.type;

（2）detail

detail屬性返回一個數(shù)值，表示事件的某種信息。具體含義與事件類型有關(guān)，對于鼠標(biāo)事件，表示鼠標(biāo)按鍵在某個位置按下的次數(shù)，比如對于dblclick事件，detail屬性的值總是2。

function giveDetails(e) {
  this.textContent = e.detail;
}

el.onclick = giveDetails;

（3）timeStamp

timeStamp屬性返回一個毫秒時間戳，表示事件發(fā)生的時間。

var number = event.timeStamp;

（4）isTrusted

isTrusted屬性返回一個布爾值，表示該事件是否可以信任。

var bool = event.isTrusted;

Firefox瀏覽器中，用戶觸發(fā)的事件會返回true，腳本觸發(fā)的事件返回false；IE瀏覽器中，除了使用createEvent方法生成的事件，所有其他事件都返回true；Chrome瀏覽器不支持該屬性。

preventDefault()

preventDefault方法取消瀏覽器對當(dāng)前事件的默認(rèn)行為，比如點擊鏈接后，瀏覽器跳轉(zhuǎn)到指定頁面，或者按一下空格鍵，頁面向下滾動一段距離。該方法生效的前提是，事件的cancelable屬性為true，如果為false，則調(diào)用該方法沒有任何效果。

該方法不會阻止事件的進(jìn)一步傳播（stopPropagation方法可用于這個目的）。只要在事件的傳播過程中（捕獲階段、目標(biāo)階段、冒泡階段皆可），使用了preventDefault方法，該事件的默認(rèn)方法就不會執(zhí)行。

// HTML代碼為
// <input type="checkbox" id="my-checkbox" />

var cb = document.getElementById('my-checkbox');

cb.addEventListener(
  'click',
  function (e){ e.preventDefault(); },
  false
);

上面代碼為點擊單選框的事件，設(shè)置監(jiān)聽函數(shù)，取消默認(rèn)行為。由于瀏覽器的默認(rèn)行為是選中單選框，所以這段代碼會導(dǎo)致無法選中單選框。

利用這個方法，可以為文本輸入框設(shè)置校驗條件。如果用戶的輸入不符合條件，就無法將字符輸入文本框。

function checkName(e) {
  if (e.charCode < 97 || e.charCode > 122) {
    e.preventDefault();
  }
}

上面函數(shù)設(shè)為文本框的keypress監(jiān)聽函數(shù)后，將只能輸入小寫字母，否則輸入事件的默認(rèn)事件（寫入文本框）將被取消。

如果監(jiān)聽函數(shù)最后返回布爾值false（即return false），瀏覽器也不會觸發(fā)默認(rèn)行為，與preventDefault方法有等同效果。

stopPropagation()

stopPropagation方法阻止事件在DOM中繼續(xù)傳播，防止再觸發(fā)定義在別的節(jié)點上的監(jiān)聽函數(shù)，但是不包括在當(dāng)前節(jié)點上新定義的事件監(jiān)聽函數(shù)。

function stopEvent(e) {
  e.stopPropagation();
}

el.addEventListener('click', stopEvent, false);

將上面函數(shù)指定為監(jiān)聽函數(shù)，會阻止事件進(jìn)一步冒泡到el節(jié)點的父節(jié)點。

stopImmediatePropagation()

stopImmediatePropagation方法阻止同一個事件的其他監(jiān)聽函數(shù)被調(diào)用。

如果同一個節(jié)點對于同一個事件指定了多個監(jiān)聽函數(shù)，這些函數(shù)會根據(jù)添加的順序依次調(diào)用。只要其中有一個監(jiān)聽函數(shù)調(diào)用了stopImmediatePropagation方法，其他的監(jiān)聽函數(shù)就不會再執(zhí)行了。

function l1(e){
  e.stopImmediatePropagation();
}

function l2(e){
  console.log('hello world');
}

el.addEventListener('click', l1, false);
el.addEventListener('click', l2, false);

上面代碼在el節(jié)點上，為click事件添加了兩個監(jiān)聽函數(shù)l1和l2。由于l1調(diào)用了stopImmediatePropagation方法，所以l2不會被調(diào)用。

鼠標(biāo)事件

事件種類

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

（1）click事件

click事件當(dāng)用戶在Element節(jié)點、document節(jié)點、window對象上，單擊鼠標(biāo)（或者按下回車鍵）時觸發(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事件進(jìn)行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>

（2）dblclick事件

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

（3）mouseup事件，mousedown事件

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

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

（4）mousemove事件

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

（5）mouseover事件，mouseenter事件

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

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

下面的例子是mouseenter事件與mouseover事件的區(qū)別。

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

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

上面代碼中，由于mouseover事件會冒泡，所以子節(jié)點的mouseover事件會觸發(fā)父節(jié)點的監(jiān)聽函數(shù)。

（6）mouseout事件，mouseleave事件

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

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

（7）contextmenu

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

MouseEvent對象

鼠標(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)），默認(rèn)為0，等同于MouseEvent.screenX屬性。
screenY，設(shè)置鼠標(biāo)相對于屏幕的垂直坐標(biāo)，默認(rèn)為0，等同于MouseEvent.screenY屬性。
clientX，設(shè)置鼠標(biāo)相對于窗口的水平坐標(biāo)，默認(rèn)為0，等同于MouseEvent.clientX屬性。
clientY，設(shè)置鼠標(biāo)相對于窗口的垂直坐標(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è)置按下了哪一個鼠標(biāo)按鍵，默認(rèn)為0。-1表示沒有按鍵，0表示按下主鍵（通常是左鍵），1表示按下輔助鍵（通常是中間的鍵），2表示按下次要鍵（通常是右鍵）。
buttons，設(shè)置按下了鼠標(biāo)哪些鍵，是一個3個比特位的二進(jìn)制值，默認(rèn)為0。1表示按下主鍵（通常是左鍵），2表示按下次要鍵（通常是右鍵），4表示按下輔助鍵（通常是中間的鍵）。
relatedTarget，設(shè)置一個Element節(jié)點，在mouseenter和mouseover事件時，表示鼠標(biāo)剛剛離開的那個Element節(jié)點，在mouseout和mouseleave事件時，表示鼠標(biāo)正在進(jìn)入的那個Element節(jié)點。默認(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)點擊的次數(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實例的屬性。

altKey，ctrlKey，metaKey，shiftKey

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

altKey屬性：alt鍵
ctrlKey屬性：key鍵
metaKey屬性：Meta鍵（Mac鍵盤是一個四瓣的小花，Windows鍵盤是Windows鍵）
shiftKey屬性：Shift鍵

// HTML代碼為
// <body onclick="showkey(event);">

function showKey(e){
  console.log("ALT key pressed: " + e.altKey);
  console.log("CTRL key pressed: " + e.ctrlKey);
  console.log("META key pressed: " + e.metaKey);
  console.log("META key pressed: " + e.shiftKey);
}

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

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：二進(jìn)制為001，表示按下左鍵。
2：二進(jìn)制為010，表示按下右鍵。
4：二進(jìn)制為100，表示按下中鍵或滾輪鍵。

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

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

relatedTarget

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

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

事件名稱	target屬性	relatedTarget屬性
focusin	接受焦點的節(jié)點	喪失焦點的節(jié)點
focusout	喪失焦點的節(jié)點	接受焦點的節(jié)點
mouseenter	將要進(jìn)入的節(jié)點	將要離開的節(jié)點
mouseleave	將要離開的節(jié)點	將要進(jìn)入的節(jié)點
mouseout	將要離開的節(jié)點	將要進(jìn)入的節(jié)點
mouseover	將要進(jìn)入的節(jié)點	將要離開的節(jié)點
dragenter	將要進(jìn)入的節(jié)點	將要離開的節(jié)點
dragexit	將要離開的節(jié)點	將要進(jìn)入的節(jié)點

下面是一個例子。

// 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事件

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ā)的順序如下。

keydown
keypress
keydown
keypress
（重復(fù)以上過程）
keyup

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

event = new KeyboardEvent(typeArg, KeyboardEventInit);

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

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

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

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

key，charCode

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

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

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

進(jìn)度事件

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

進(jìn)度事件有以下幾種。

abort事件：當(dāng)進(jìn)度事件被中止時觸發(fā)。如果發(fā)生錯誤，導(dǎo)致進(jìn)程中止，不會觸發(fā)該事件。
error事件：由于錯誤導(dǎo)致資源無法加載時觸發(fā)。
load事件：進(jìn)度成功結(jié)束時觸發(fā)。
loadstart事件：進(jìn)度開始時觸發(fā)。
loadend事件：進(jìn)度停止時觸發(fā)，發(fā)生順序排在error事件\abort事件\load事件后面。
progress事件：當(dāng)操作處于進(jìn)度之中，由傳輸?shù)臄?shù)據(jù)塊不斷觸發(fā)。
timeout事件：進(jìn)度超過限時觸發(fā)。

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

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

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

有時候，圖片加載會在腳本運(yùn)行之前就完成，尤其是當(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="https://atts.w3cschool.cn/attachments/image/cimg/url" onerror="this.style.display='none';" />

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

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

lengthComputable：返回一個布爾值，表示當(dāng)前進(jìn)度是否具有可計算的長度。如果為false，就表示當(dāng)前進(jìn)度無法測量。
total：返回一個數(shù)值，表示當(dāng)前進(jìn)度的總長度。如果是通過HTTP下載某個資源，表示內(nèi)容本身的長度，不含HTTP頭部的長度。如果lengthComputable屬性為false，則total屬性就無法取得正確的值。
loaded：返回一個數(shù)值，表示當(dāng)前進(jìn)度已經(jīng)完成的數(shù)量。該屬性除以total屬性，就可以得到目前進(jìn)度的百分比。

下面是一個例子。

var xhr = new XMLHttpRequest();

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

以上內(nèi)容是否對您有幫助：

← JavaScript Text節(jié)點和DocumentFragment節(jié)點

JavaScript CSS操作 →

寫筆記

我要補(bǔ)充

JavaScript Event對象

EventTarget接口

addEventListener()

removeEventListener()

dispatchEvent()

監(jiān)聽函數(shù)

HTML標(biāo)簽的on-屬性

Element節(jié)點的事件屬性

addEventListener方法

this對象的指向

事件的傳播

傳播的三個階段

事件的代理

Event對象

bubbles，eventPhase

cancelable，defaultPrevented

currentTarget，target

type，detail，timeStamp，isTrusted

preventDefault()

stopPropagation()

stopImmediatePropagation()

鼠標(biāo)事件

事件種類

MouseEvent對象

altKey，ctrlKey，metaKey，shiftKey

button，buttons

clientX，clientY，movementX，movementY，screenX，screenY

relatedTarget

wheel事件

鍵盤事件

altKey，ctrlKey，metaKey，shiftKey

key，charCode

進(jìn)度事件

推薦文章

推薦教程

推薦課程

bubbles，eventPhase

type，detail，timeStamp，isTrusted

altKey，ctrlKey，metaKey，shiftKey

clientX，clientY，movementX，movementY，screenX，screenY

altKey，ctrlKey，metaKey，shiftKey

key，charCode