作者 | 阮一峰

概述

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

Event對象本身就是一個構造函數，可以用來生成新的實例。

event = new Event(type, options);

Event構造函數接受兩個參數。第一個參數type是字符串，表示事件的名稱；第二個參數options是一個對象，表示事件對象的配置。該對象主要有下面兩個屬性。

• bubbles：布爾值，可選，默認為false，表示事件對象是否冒泡。

• cancelable：布爾值，可選，默認為false，表示事件是否可以被取消，即能否用Event.preventDefault()取消這個事件。一旦事件被取消，就好像從來沒有發生過，不會觸發瀏覽器對該事件的默認行為。

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

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

注意，如果不是顯式指定bubbles屬性為true，生成的事件就只能在“捕獲階段”觸發監聽函數。

// HTML 代碼為
//

Hello

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

function callback(event) {
var tag = event.currentTarget.tagName;
console.log('Tag: ' + tag); // 沒有任何輸出
}

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

var click = new Event('click');
p.dispatchEvent(click);

上面代碼中，p元素發出一個click事件，該事件默認不會冒泡。div.addEventListener方法指定在冒泡階段監聽，因此監聽函數不會觸發。如果寫成div.addEventListener('click', callback, true)，那么在“捕獲階段”可以監聽到這個事件。

另一方面，如果這個事件在div元素上觸發。

div.dispatchEvent(click);

那么，不管div元素是在冒泡階段監聽，還是在捕獲階段監聽，都會觸發監聽函數。因為這時div元素是事件的目標，不存在是否冒泡的問題，div元素總是會接收到事件，因此導致監聽函數生效。

實例屬性

Event.bubbles，Event.eventPhase

Event.bubbles屬性返回一個布爾值，表示當前事件是否會冒泡。該屬性為只讀屬性，一般用來了解 Event 實例是否可以冒泡。前面說過，除非顯式聲明，Event構造函數生成的事件，默認是不冒泡的。

Event.eventPhase屬性返回一個整數常量，表示事件目前所處的階段。該屬性只讀。

var phase = event.eventPhase;

Event.eventPhase的返回值有四種可能。

• 0，事件目前沒有發生。

• 1，事件目前處于捕獲階段，即處于從祖先節點向目標節點的傳播過程中。

• 2，事件到達目標節點，即Event.target屬性指向的那個節點。

• 3，事件處于冒泡階段，即處于從目標節點向祖先節點的反向傳播過程中。

Event.cancelable，Event.cancelBubble，event.defaultPrevented

Event.cancelable屬性返回一個布爾值，表示事件是否可以取消。該屬性為只讀屬性，一般用來了解 Event 實例的特性。

大多數瀏覽器的原生事件是可以取消的。比如，取消click事件，點擊鏈接將無效。但是除非顯式聲明，Event構造函數生成的事件，默認是不可以取消的。

var evt = new Event('foo');
evt.cancelable // false

當Event.cancelable屬性為true時，調用Event.preventDefault()就可以取消這個事件，阻止瀏覽器對該事件的默認行為。

如果事件不能取消，調用Event.preventDefault()會沒有任何效果。所以使用這個方法之前，最好用Event.cancelable屬性判斷一下是否可以取消。

function preventEvent(event) {
if (event.cancelable) {
event.preventDefault();
} else {
console.warn('This event couldn\'t be canceled.');
console.dir(event);
}
}

Event.cancelBubble屬性是一個布爾值，如果設為true，相當于執行Event.stopPropagation()，可以阻止事件的傳播。

Event.defaultPrevented屬性返回一個布爾值，表示該事件是否調用過Event.preventDefault方法。該屬性只讀。

if (event.defaultPrevented) {
console.log('該事件已經取消了');
}

Event.currentTarget，Event.target

Event.currentTarget屬性返回事件當前所在的節點，即正在執行的監聽函數所綁定的那個節點。

Event.target屬性返回原始觸發事件的那個節點，即事件最初發生的節點。事件傳播過程中，不同節點的監聽函數內部的Event.target與Event.currentTarget屬性的值是不一樣的，前者總是不變的，后者則是指向監聽函數所在的那個節點對象。

// HTML代碼為
//

Hello World

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

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

上面代碼中，如果在para節點的子節點上面點擊，則e.target指向子節點，導致子節點(即 World 部分)會不可見。如果點擊 Hello 部分，則整個para都將不可見。

Event.type

Event.type屬性返回一個字符串，表示事件類型。事件的類型是在生成事件的時候指定的。該屬性只讀。

var evt = new Event('foo');
evt.type // "foo"

Event.timeStamp

Event.timeStamp屬性返回一個毫秒時間戳，表示事件發生的時間。它是相對于網頁加載成功開始計算的。

var evt = new Event('foo');
evt.timeStamp // 3683.6999999995896

它的返回值有可能是整數，也有可能是小數(高精度時間戳)，取決于瀏覽器的設置。

下面是一個計算鼠標移動速度的例子，顯示每秒移動的像素數量。

var previousX;
var previousY;
var previousT;

window.addEventListener('mousemove', function(event) {
if (
previousX !== undefined &&
previousY !== undefined &&
previousT !== undefined
) {
var deltaX = event.screenX - previousX;
var deltaY = event.screenY - previousY;
var deltaD = Math.sqrt(Math.pow(deltaX, 2) + Math.pow(deltaY, 2));

var deltaT = event.timeStamp - previousT;
console.log(deltaD / deltaT * 1000);
}

previousX = event.screenX;
previousY = event.screenY;
previousT = event.timeStamp;
});

Event.isTrusted

Event.isTrusted屬性返回一個布爾值，表示該事件是否由真實的用戶行為產生。比如，用戶點擊鏈接會產生一個click事件，該事件是用戶產生的；Event構造函數生成的事件，則是腳本產生的。

var evt = new Event('foo');
evt.isTrusted // false

上面代碼中，evt對象是腳本產生的，所以isTrusted屬性返回false。

Event.detail

Event.detail屬性只有瀏覽器的 UI (用戶界面)事件才具有。該屬性返回一個數值，表示事件的某種信息。具體含義與事件類型相關。比如，對于click和dblclick事件，Event.detail是鼠標按下的次數(1表示單擊，2表示雙擊，3表示三擊)；對于鼠標滾輪事件，Event.detail是滾輪正向滾動的距離，負值就是負向滾動的距離，返回值總是3的倍數。

// HTML 代碼如下
//

Hello

function giveDetails(e) {
console.log(e.detail);
}

document.querySelector('p').onclick = giveDetails;

實例方法

Event.preventDefault()

Event.preventDefault方法取消瀏覽器對當前事件的默認行為。比如點擊鏈接后，瀏覽器默認會跳轉到另一個頁面，使用這個方法以后，就不會跳轉了；再比如，按一下空格鍵，頁面向下滾動一段距離，使用這個方法以后也不會滾動了。該方法生效的前提是，事件對象的cancelable屬性為true，如果為false，調用該方法沒有任何效果。

注意，該方法只是取消事件對當前元素的默認影響，不會阻止事件的傳播。如果要阻止傳播，可以使用stopPropagation()或stopImmediatePropagation()方法。

// HTML 代碼為
//
var cb = document.getElementById('my-checkbox');

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

上面代碼中，瀏覽器的默認行為是單擊會選中單選框，取消這個行為，就導致無法選中單選框。

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

// HTML 代碼為
//
var input = document.getElementById('my-input');
input.addEventListener('keypress', checkName, false);

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

上面代碼為文本框的keypress事件設定監聽函數后，將只能輸入小寫字母，否則輸入事件的默認行為(寫入文本框)將被取消，導致不能向文本框輸入內容。

Event.stopPropagation()

stopPropagation方法阻止事件在 DOM 中繼續傳播，防止再觸發定義在別的節點上的監聽函數，但是不包括在當前節點上其他的事件監聽函數。

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

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

上面代碼中，click事件將不會進一步冒泡到el節點的父節點。

Event.stopImmediatePropagation()

Event.stopImmediatePropagation方法阻止同一個事件的其他監聽函數被調用，不管監聽函數定義在當前節點還是其他節點。也就是說，該方法阻止事件的傳播，比Event.stopPropagation()更徹底。

如果同一個節點對于同一個事件指定了多個監聽函數，這些函數會根據添加的順序依次調用。只要其中有一個監聽函數調用了Event.stopImmediatePropagation方法，其他的監聽函數就不會再執行了。

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

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

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

上面代碼在el節點上，為click事件添加了兩個監聽函數l1和l2。由于l1調用了event.stopImmediatePropagation方法，所以l2不會被調用。

Event.composedPath()

Event.composedPath()返回一個數組，成員是事件的最底層節點和依次冒泡經過的所有上層節點。

// HTML 代碼如下
// //

Hello

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

div.addEventListener('click', function (e) {
console.log(e.composedPath());
}, false);
// [p, div, body, html, document, Window]

上面代碼中，click事件的最底層節點是p，向上依次是div、body、html、document、Window。

總結

以上是生活随笔為你收集整理的idea中event log_【JavaScript 教程】事件——Event 对象的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。