事件模型

事件是一種異步編程的實(shí)現(xiàn)方式，本質(zhì)上是程序各個(gè)組成部分之間的通信。DOM支持大量的事件，本節(jié)介紹DOM的事件編程闰渔。

EventTarget接口

DOM的事件操作（監(jiān)聽(tīng)和觸發(fā)），都定義在EventTarget接口铐望。Element節(jié)點(diǎn)冈涧、document節(jié)點(diǎn)和window對(duì)象，都部署了這個(gè)接口蝌以。此外，XMLHttpRequest何之、AudioNode跟畅、AudioContext等瀏覽器內(nèi)置對(duì)象，也部署了這個(gè)接口溶推。

該接口就是三個(gè)方法徊件。

  • addEventListener：綁定事件的監(jiān)聽(tīng)函數(shù)
  • removeEventListener：移除事件的監(jiān)聽(tīng)函數(shù)
  • dispatchEvent：觸發(fā)事件

addEventListener()

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

// 使用格式
target.addEventListener(type, listener[, useCapture]);

// 實(shí)例
window.addEventListener('load', function () {...}, false);
request.addEventListener('readystatechange', function () {...}, false);

addEventListener方法接受三個(gè)參數(shù)虱痕。

  • type：事件名稱，大小寫(xiě)敏感辐赞。
  • listener：監(jiān)聽(tīng)函數(shù)部翘。事件發(fā)生時(shí)，會(huì)調(diào)用該監(jiān)聽(tīng)函數(shù)响委。
  • useCapture：布爾值新思，表示監(jiān)聽(tīng)函數(shù)是否在捕獲階段（capture）觸發(fā)（參見(jiàn)后文《事件的傳播》部分），默認(rèn)為false（監(jiān)聽(tīng)函數(shù)只在冒泡階段被觸發(fā)）赘风。老式瀏覽器規(guī)定該參數(shù)必寫(xiě)夹囚，較新版本的瀏覽器允許該參數(shù)可選。為了保持兼容邀窃，建議總是寫(xiě)上該參數(shù)荸哟。

下面是一個(gè)例子。

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

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

上面代碼中，addEventListener方法為button元素節(jié)點(diǎn)鞍历，綁定click事件的監(jiān)聽(tīng)函數(shù)hello舵抹，該函數(shù)只在冒泡階段觸發(fā)。

addEventListener方法可以為當(dāng)前對(duì)象的同一個(gè)事件堰燎，添加多個(gè)監(jiān)聽(tīng)函數(shù)掏父。這些函數(shù)按照添加順序觸發(fā)，即先添加先觸發(fā)秆剪。如果為同一個(gè)事件多次添加同一個(gè)監(jiān)聽(tīng)函數(shù)赊淑，該函數(shù)只會(huì)執(zhí)行一次，多余的添加將自動(dòng)被去除（不必使用removeEventListener方法手動(dòng)去除）仅讽。

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

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

執(zhí)行上面代碼陶缺，點(diǎn)擊文檔只會(huì)輸出一行Hello world。

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

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

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

上面代碼通過(guò)匿名函數(shù)，向監(jiān)聽(tīng)函數(shù)print傳遞了一個(gè)參數(shù)徽千。

removeEventListener()

removeEventListener方法用來(lái)移除addEventListener方法添加的事件監(jiān)聽(tīng)函數(shù)苫费。

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

removeEventListener方法的參數(shù)，與addEventListener方法完全一致双抽。它的第一個(gè)參數(shù)“事件類(lèi)型”百框，大小寫(xiě)敏感。

注意牍汹，removeEventListener方法移除的監(jiān)聽(tīng)函數(shù)铐维，必須與對(duì)應(yīng)的addEventListener方法的參數(shù)完全一致，而且必須在同一個(gè)元素節(jié)點(diǎn)慎菲，否則無(wú)效嫁蛇。

dispatchEvent()

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

target.dispatchEvent(event)

dispatchEvent方法的參數(shù)是一個(gè)Event對(duì)象的實(shí)例。

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

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

如果dispatchEvent方法的參數(shù)為空新荤，或者不是一個(gè)有效的事件對(duì)象，將報(bào)錯(cuò)台汇。

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

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

監(jiān)聽(tīng)函數(shù)

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

DOM提供三種方法，可以用來(lái)為事件綁定監(jiān)聽(tīng)函數(shù)严衬。

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

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

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

上面代碼為body節(jié)點(diǎn)的load事件请琳、div節(jié)點(diǎn)的click事件粱挡，指定了監(jiān)聽(tīng)函數(shù)。

使用這個(gè)方法指定的監(jiān)聽(tīng)函數(shù)俄精，只會(huì)在冒泡階段觸發(fā)询筏。

注意，使用這種方法時(shí)竖慧，on-屬性的值是將會(huì)執(zhí)行的代碼嫌套，而不是一個(gè)函數(shù)。

<!-- 正確 -->
<body onload="doSomething()">

<!-- 錯(cuò)誤 -->
<body onload="doSomething">

一旦指定的事件發(fā)生圾旨，on-屬性的值是原樣傳入JavaScript引擎執(zhí)行踱讨。因此如果要執(zhí)行函數(shù)，不要忘記加上一對(duì)圓括號(hào)砍的。

另外痹筛，Element元素節(jié)點(diǎn)的setAttribute方法，其實(shí)設(shè)置的也是這種效果挨约。

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

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

Element節(jié)點(diǎn)對(duì)象有事件屬性味混，同樣可以指定監(jiān)聽(tīng)函數(shù)产雹。

window.onload = doSomething;

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

使用這個(gè)方法指定的監(jiān)聽(tīng)函數(shù)诫惭，只會(huì)在冒泡階段觸發(fā)。

addEventListener方法

通過(guò)Element節(jié)點(diǎn)蔓挖、document節(jié)點(diǎn)夕土、window對(duì)象的addEventListener方法，也可以定義事件的監(jiān)聽(tīng)函數(shù)瘟判。

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

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

在上面三種方法中拷获，第一種“HTML標(biāo)簽的on-屬性”篮撑，違反了HTML與JavaScript代碼相分離的原則；第二種“Element節(jié)點(diǎn)的事件屬性”的缺點(diǎn)是匆瓜，同一個(gè)事件只能定義一個(gè)監(jiān)聽(tīng)函數(shù)赢笨，也就是說(shuō)未蝌，如果定義兩次onclick屬性，后一次定義會(huì)覆蓋前一次茧妒。因此萧吠，這兩種方法都不推薦使用，除非是為了程序的兼容問(wèn)題桐筏，因?yàn)樗袨g覽器都支持這兩種方法纸型。

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

  • 可以針對(duì)同一個(gè)事件梅忌，添加多個(gè)監(jiān)聽(tīng)函數(shù)狰腌。

  • 能夠指定在哪個(gè)階段（捕獲階段還是冒泡階段）觸發(fā)回監(jiān)聽(tīng)函數(shù)。

  • 除了DOM節(jié)點(diǎn)铸鹰，還可以部署在window癌别、XMLHttpRequest等對(duì)象上面，等于統(tǒng)一了整個(gè)JavaScript的監(jiān)聽(tīng)函數(shù)接口蹋笼。

this對(duì)象的指向

實(shí)際編程中展姐，監(jiān)聽(tīng)函數(shù)內(nèi)部的this對(duì)象，常常需要指向觸發(fā)事件的那個(gè)Element節(jié)點(diǎn)剖毯。

addEventListener方法指定的監(jiān)聽(tīng)函數(shù)圾笨，內(nèi)部的this對(duì)象總是指向觸發(fā)事件的那個(gè)節(jié)點(diǎn)。

// 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í)行上面代碼逊谋，點(diǎn)擊<p>節(jié)點(diǎn)會(huì)輸出para擂达。這是因?yàn)楸O(jiān)聽(tīng)函數(shù)被“拷貝”成了節(jié)點(diǎn)的一個(gè)屬性，所以this指向節(jié)點(diǎn)對(duì)象胶滋。使用下面的寫(xiě)法板鬓，會(huì)看得更清楚。

para.onclick = hello;

如果將監(jiān)聽(tīng)函數(shù)部署在Element節(jié)點(diǎn)的on-屬性上面究恤，this不會(huì)指向觸發(fā)事件的元素節(jié)點(diǎn)俭令。

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

執(zhí)行上面代碼，點(diǎn)擊<p>節(jié)點(diǎn)會(huì)輸出doc部宿。這是因?yàn)檫@里只是調(diào)用hello函數(shù)抄腔，而hello函數(shù)實(shí)際是在全局作用域執(zhí)行，相當(dāng)于下面的代碼理张。

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

一種解決方法是赫蛇，不引入函數(shù)作用域，直接在on-屬性寫(xiě)入所要執(zhí)行的代碼雾叭。因?yàn)?code>on-屬性是在當(dāng)前節(jié)點(diǎn)上執(zhí)行的悟耘。

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

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

總結(jié)一下暂幼，以下寫(xiě)法的this對(duì)象都指向Element節(jié)點(diǎn)掘殴。

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

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

以下寫(xiě)法的this對(duì)象，都指向全局對(duì)象粟誓。

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

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

事件的傳播

傳播的三個(gè)階段

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

  • 第一階段：從window對(duì)象傳導(dǎo)到目標(biāo)節(jié)點(diǎn)鹰服，稱為“捕獲階段”（capture phase）病瞳。

  • 第二階段：在目標(biāo)節(jié)點(diǎn)上觸發(fā)，稱為“目標(biāo)階段”（target phase）悲酷。

  • 第三階段：從目標(biāo)節(jié)點(diǎn)傳導(dǎo)回window對(duì)象套菜，稱為“冒泡階段”（bubbling phase）。

這種三階段的傳播模型设易，會(huì)使得一個(gè)事件在多個(gè)節(jié)點(diǎn)上觸發(fā)逗柴。比如，假設(shè)點(diǎn)擊<div>之中嵌套一個(gè)<p>節(jié)點(diǎn)顿肺。

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

如果對(duì)這兩個(gè)節(jié)點(diǎn)的click事件都設(shè)定監(jiān)聽(tīng)函數(shù)戏溺，則click事件會(huì)被觸發(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 + "'");
}

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

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

  1. 捕獲階段：事件從<div>向<p>傳播時(shí)讼昆，觸發(fā)<div>的click事件托享；
  2. 目標(biāo)階段：事件從<div>到達(dá)<p>時(shí)，觸發(fā)<p>的click事件浸赫；
  3. 目標(biāo)階段：事件離開(kāi)<p>時(shí)闰围，觸發(fā)<p>的click事件；
  4. 冒泡階段：事件從<p>傳回<div>時(shí)既峡，再次觸發(fā)<div>的click事件羡榴。

注意，用戶點(diǎn)擊網(wǎng)頁(yè)的時(shí)候涧狮，瀏覽器總是假定click事件的目標(biāo)節(jié)點(diǎn)炕矮，就是點(diǎn)擊位置的嵌套最深的那個(gè)節(jié)點(diǎn)（嵌套在<div>節(jié)點(diǎn)的<p>節(jié)點(diǎn)）么夫。所以者冤，<p>節(jié)點(diǎn)的捕獲階段和冒泡階段，都會(huì)顯示為target階段档痪。

事件傳播的最上層對(duì)象是window涉枫，接著依次是document，html（document.documentElement）和body（document.dody）腐螟。也就是說(shuō)愿汰，如果<body>元素中有一個(gè)<div>元素困后，點(diǎn)擊該元素。事件的傳播順序衬廷，在捕獲階段依次為window摇予、document、html吗跋、body侧戴、div，在冒泡階段依次為div跌宛、body酗宋、html、document疆拘、window蜕猫。

事件的代理

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

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

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

上面代碼的click事件的監(jiān)聽(tīng)函數(shù)定義在<ul>節(jié)點(diǎn)漱挚，但是實(shí)際上楣黍，它處理的是子節(jié)點(diǎn)<li>的click事件。這樣做的好處是棱烂，只要定義一個(gè)監(jiān)聽(tīng)函數(shù)租漂，就能處理多個(gè)子節(jié)點(diǎn)的事件，而且以后再添加子節(jié)點(diǎn)颊糜，監(jiān)聽(tīng)函數(shù)依然有效哩治。

如果希望事件到某個(gè)節(jié)點(diǎn)為止，不再傳播衬鱼，可以使用事件對(duì)象的stopPropagation方法业筏。

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

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

但是，stopPropagation方法只會(huì)阻止當(dāng)前監(jiān)聽(tīng)函數(shù)的傳播抛蚤，不會(huì)阻止<p>節(jié)點(diǎn)上的其他click事件的監(jiān)聽(tīng)函數(shù)台谢。如果想要不再觸發(fā)那些監(jiān)聽(tīng)函數(shù)，可以使用stopImmediatePropagation方法岁经。

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

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

Event對(duì)象

事件發(fā)生以后朋沮，會(huì)生成一個(gè)事件對(duì)象，作為參數(shù)傳給監(jiān)聽(tīng)函數(shù)缀壤。瀏覽器原生提供一個(gè)Event對(duì)象樊拓，所有的事件都是這個(gè)對(duì)象的實(shí)例纠亚，或者說(shuō)繼承了Event.prototype對(duì)象。

Event對(duì)象本身就是一個(gè)構(gòu)造函數(shù)筋夏，可以用來(lái)生成新的實(shí)例蒂胞。

event = new Event(typeArg, eventInit);

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

  • bubbles：布爾值，可選稚瘾，默認(rèn)為false牡昆，表示事件對(duì)象是否冒泡。
  • cancelable：布爾值摊欠，可選丢烘，默認(rèn)為false，表示事件是否可以被取消些椒。
var ev = new Event(
  'look',
  {
    'bubbles': true,
    'cancelable': false
  }
);
document.dispatchEvent(ev);

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

IE8及以下版本免糕，事件對(duì)象不作為參數(shù)傳遞赢乓，而是通過(guò)window對(duì)象的event屬性讀取，并且事件對(duì)象的target屬性叫做srcElement屬性石窑。所以牌芋，以前獲取事件信息，往往要寫(xiě)成下面這樣松逊。

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

上面的代碼只是為了說(shuō)明以前的程序?yàn)槭裁催@樣寫(xiě)躺屁，在新代碼中，這樣的寫(xiě)法不應(yīng)該再用了经宏。

event.bubbles犀暑，event.eventPhase

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

（1）bubbles

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

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

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

（2）event.eventPhase

eventPhase屬性返回一個(gè)整數(shù)值杀餐，表示事件目前所處的階段干发。

var phase = event.eventPhase;
  • 0，事件目前沒(méi)有發(fā)生史翘。
  • 1枉长，事件目前處于捕獲階段，即處于從祖先節(jié)點(diǎn)向目標(biāo)節(jié)點(diǎn)的傳播過(guò)程中琼讽。該過(guò)程是從Window對(duì)象到Document節(jié)點(diǎn)必峰，再到HTMLHtmlElement節(jié)點(diǎn)，直到目標(biāo)節(jié)點(diǎn)的父節(jié)點(diǎn)為止钻蹬。
  • 2吼蚁，事件到達(dá)目標(biāo)節(jié)點(diǎn)，即target屬性指向的那個(gè)節(jié)點(diǎn)问欠。
  • 3肝匆，事件處于冒泡階段，即處于從目標(biāo)節(jié)點(diǎn)向祖先節(jié)點(diǎn)的反向傳播過(guò)程中顺献。該過(guò)程是從父節(jié)點(diǎn)一直到Window對(duì)象旗国。只有bubbles屬性為true時(shí)，這個(gè)階段才可能發(fā)生注整。

event.cancelable能曾，event.defaultPrevented

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

（1）cancelable

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

var bool = event.cancelable;

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

（2）defaultPrevented

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

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

event.currentTarget兼吓，event.target

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

（1）currentTarget

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

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

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

上面代碼中式散，點(diǎn)擊para節(jié)點(diǎn)，該節(jié)點(diǎn)會(huì)不可見(jiàn)打颤。另外暴拄，在監(jiān)聽(tīng)函數(shù)中，currentTarget屬性實(shí)際上等同于this對(duì)象编饺。

（2）target

target屬性返回觸發(fā)事件的那個(gè)節(jié)點(diǎn)乖篷，即事件最初發(fā)生的節(jié)點(diǎn)。如果監(jiān)聽(tīng)函數(shù)不在該節(jié)點(diǎn)觸發(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é)點(diǎn)的em子節(jié)點(diǎn)上面點(diǎn)擊石蔗，則e.target指向em子節(jié)點(diǎn)罕邀，導(dǎo)致em子節(jié)點(diǎn)（即World部分）會(huì)不可見(jiàn)，且輸出false养距。

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

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

event.type耘纱，event.detail敬肚，event.timeStamp，event.isTrusted

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

（1）type

type屬性返回一個(gè)字符串艳馒，表示事件類(lèi)型，大小寫(xiě)敏感员寇。

var string = event.type;

（2）detail

detail屬性返回一個(gè)數(shù)值弄慰，表示事件的某種信息。具體含義與事件類(lèi)型有關(guān)蝶锋，對(duì)于鼠標(biāo)事件陆爽，表示鼠標(biāo)按鍵在某個(gè)位置按下的次數(shù)，比如對(duì)于dblclick事件扳缕，detail屬性的值總是2慌闭。

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

el.onclick = giveDetails;

（3）timeStamp

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

var number = event.timeStamp;

Chrome在49版以前驴剔，這個(gè)屬性返回的是一個(gè)整數(shù)省古，單位是毫秒（millisecond），表示從Unix紀(jì)元開(kāi)始的時(shí)間戳仔拟。從49版開(kāi)始衫樊，該屬性返回的是一個(gè)高精度時(shí)間戳飒赃，也就是說(shuō)利花，毫秒之后還帶三位小數(shù)，精確到微秒载佳。并且炒事，這個(gè)值不再?gòu)腢nix紀(jì)元開(kāi)始計(jì)算，而是從PerformanceTiming.navigationStart開(kāi)始計(jì)算蔫慧，即表示距離用戶導(dǎo)航至該網(wǎng)頁(yè)的時(shí)間挠乳。如果想將這個(gè)值轉(zhuǎn)為Unix紀(jì)元時(shí)間戳，就要計(jì)算event.timeStamp + performance.timing.navigationStart姑躲。

下面是一個(gè)計(jì)算鼠標(biāo)移動(dòng)速度的例子睡扬，顯示每秒移動(dòng)的像素?cái)?shù)量。

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

（4）isTrusted

isTrusted屬性返回一個(gè)布爾值黍析，表示該事件是否為真實(shí)用戶觸發(fā)卖怜。

var bool = event.isTrusted;

用戶觸發(fā)的事件返回true，腳本觸發(fā)的事件返回false阐枣。

event.preventDefault()

preventDefault方法取消瀏覽器對(duì)當(dāng)前事件的默認(rèn)行為马靠，比如點(diǎn)擊鏈接后，瀏覽器跳轉(zhuǎn)到指定頁(yè)面蔼两，或者按一下空格鍵甩鳄，頁(yè)面向下滾動(dòng)一段距離。該方法生效的前提是额划，事件對(duì)象的cancelable屬性為true妙啃，如果為false，則調(diào)用該方法沒(méi)有任何效果俊戳。

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

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

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

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

上面代碼為點(diǎn)擊單選框的事件突倍，設(shè)置監(jiān)聽(tīng)函數(shù)腔稀，取消默認(rèn)行為。由于瀏覽器的默認(rèn)行為是選中單選框羽历，所以這段代碼會(huì)導(dǎo)致無(wú)法選中單選框焊虏。

利用這個(gè)方法，可以為文本輸入框設(shè)置校驗(yàn)條件秕磷。如果用戶的輸入不符合條件诵闭，就無(wú)法將字符輸入文本框。

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

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

event.stopPropagation()

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

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

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

將上面函數(shù)指定為監(jiān)聽(tīng)函數(shù)晤郑，會(huì)阻止事件進(jìn)一步冒泡到el節(jié)點(diǎn)的父節(jié)點(diǎn)敌呈。

event.stopImmediatePropagation()

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

如果同一個(gè)節(jié)點(diǎn)對(duì)于同一個(gè)事件指定了多個(gè)監(jiān)聽(tīng)函數(shù)造寝，這些函數(shù)會(huì)根據(jù)添加的順序依次調(diào)用磕洪。只要其中有一個(gè)監(jiān)聽(tīng)函數(shù)調(diào)用了stopImmediatePropagation方法，其他的監(jiān)聽(tīng)函數(shù)就不會(huì)再執(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é)點(diǎn)上析显，為click事件添加了兩個(gè)監(jiān)聽(tīng)函數(shù)l1和l2。由于l1調(diào)用了stopImmediatePropagation方法赐稽，所以l2不會(huì)被調(diào)用叫榕。

自定義事件和事件模擬

除了瀏覽器預(yù)定義的那些事件，用戶還可以自定義事件姊舵，然后手動(dòng)觸發(fā)晰绎。

// 新建事件實(shí)例
var event = new Event('build');

// 添加監(jiān)聽(tīng)函數(shù)
elem.addEventListener('build', function (e) { ... }, false);

// 觸發(fā)事件
elem.dispatchEvent(event);

上面代碼觸發(fā)了自定義事件，該事件會(huì)層層向上冒泡括丁。在冒泡過(guò)程中荞下，如果有一個(gè)元素定義了該事件的監(jiān)聽(tīng)函數(shù)，該監(jiān)聽(tīng)函數(shù)就會(huì)觸發(fā)史飞。

由于IE不支持這個(gè)API尖昏，如果在IE中自定義事件，需要使用后文的“老式方法”构资。

CustomEvent()

Event構(gòu)造函數(shù)只能指定事件名抽诉，不能在事件上綁定數(shù)據(jù)。如果需要在觸發(fā)事件的同時(shí)吐绵，傳入指定的數(shù)據(jù)迹淌，需要使用CustomEvent構(gòu)造函數(shù)生成自定義的事件對(duì)象河绽。

var event = new CustomEvent('build', { 'detail': 'hello' });
function eventHandler(e) {
  console.log(e.detail);
}

上面代碼中，CustomEvent構(gòu)造函數(shù)的第一個(gè)參數(shù)是事件名稱唉窃，第二個(gè)參數(shù)是一個(gè)對(duì)象耙饰，該對(duì)象的detail屬性會(huì)綁定在事件對(duì)象之上。

下面是另一個(gè)例子纹份。

var myEvent = new CustomEvent("myevent", {
  detail: {
    foo: "bar"
  },
  bubbles: true,
  cancelable: false
});

el.addEventListener('myevent', function(event) {
  console.log('Hello ' + event.detail.foo);
});

el.dispatchEvent(myEvent);

IE不支持這個(gè)方法苟跪，可以用下面的墊片函數(shù)模擬。

(function () {
  function CustomEvent ( event, params ) {
    params = params || { bubbles: false, cancelable: false, detail: undefined };
    var evt = document.createEvent( 'CustomEvent' );
    evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
    return evt;
   }

  CustomEvent.prototype = window.Event.prototype;

  window.CustomEvent = CustomEvent;
})();

事件的模擬

有時(shí)蔓涧，需要在腳本中模擬觸發(fā)某種類(lèi)型的事件件已，這時(shí)就必須使用這種事件的構(gòu)造函數(shù)。

下面是一個(gè)通過(guò)MouseEvent構(gòu)造函數(shù)蠢笋，模擬觸發(fā)click鼠標(biāo)事件的例子拨齐。

function simulateClick() {
  var event = new MouseEvent('click', {
    'bubbles': true,
    'cancelable': true
  });
  var cb = document.getElementById('checkbox');
  cb.dispatchEvent(event);
}

自定義事件的老式寫(xiě)法

老式瀏覽器不一定支持各種類(lèi)型事件的構(gòu)造函數(shù)鳞陨。因此昨寞，有時(shí)為了兼容，會(huì)用到一些非標(biāo)準(zhǔn)的方法厦滤。這些方法未來(lái)會(huì)被逐步淘汰援岩，但是目前瀏覽器還廣泛支持。除非是為了兼容老式瀏覽器掏导，盡量不要使用享怀。

（1）document.createEvent()

document.createEvent方法用來(lái)新建指定類(lèi)型的事件。它所生成的Event實(shí)例趟咆，可以傳入dispatchEvent方法添瓷。

// 新建Event實(shí)例
var event = document.createEvent('Event');

// 事件的初始化
event.initEvent('build', true, true);

// 加上監(jiān)聽(tīng)函數(shù)
document.addEventListener('build', doSomething, false);

// 觸發(fā)事件
document.dispatchEvent(event);

createEvent方法接受一個(gè)字符串作為參數(shù)，可能的值參見(jiàn)下表“數(shù)據(jù)類(lèi)型”一欄值纱。使用了某一種“事件類(lèi)型”鳞贷，就必須使用對(duì)應(yīng)的事件初始化方法。

事件類(lèi)型 事件初始化方法
UIEvents event.initUIEvent
MouseEvents event.initMouseEvent
MutationEvents event.initMutationEvent
HTMLEvents event.initEvent
Event event.initEvent
CustomEvent event.initCustomEvent
KeyboardEvent event.initKeyEvent

（2）event.initEvent()

事件對(duì)象的initEvent方法虐唠，用來(lái)初始化事件對(duì)象搀愧，還能向事件對(duì)象添加屬性。該方法的參數(shù)必須是一個(gè)使用Document.createEvent()生成的Event實(shí)例疆偿，而且必須在dispatchEvent方法之前調(diào)用咱筛。

var event = document.createEvent('Event');
event.initEvent('my-custom-event', true, true, {foo:'bar'});
someElement.dispatchEvent(event);

initEvent方法可以接受四個(gè)參數(shù)。

  • type：事件名稱杆故，格式為字符串迅箩。
  • bubbles：事件是否應(yīng)該冒泡，格式為布爾值处铛∷乔鳎可以使用event.bubbles屬性讀取它的值叉钥。
  • cancelable：事件是否能被取消，格式為布爾值篙贸⊥抖樱可以使用event.cancelable屬性讀取它的值。
  • option：為事件對(duì)象指定額外的屬性爵川。

事件模擬的老式寫(xiě)法

事件模擬的非標(biāo)準(zhǔn)做法是敷鸦，對(duì)document.createEvent方法生成的事件對(duì)象，使用對(duì)應(yīng)的事件初始化方法進(jìn)行初始化寝贡。比如扒披，click事件對(duì)象屬于MouseEvent對(duì)象，也屬于UIEvent對(duì)象圃泡，因此要用initMouseEvent方法或initUIEvent方法進(jìn)行初始化碟案。

（1）event.initMouseEvent()

initMouseEvent方法用來(lái)初始化Document.createEvent方法新建的鼠標(biāo)事件。該方法必須在事件新建（document.createEvent方法）之后颇蜡、觸發(fā)（dispatchEvent方法）之前調(diào)用价说。

initMouseEvent方法有很長(zhǎng)的參數(shù)。

event.initMouseEvent(type, canBubble, cancelable, view,
  detail, screenX, screenY, clientX, clientY,
  ctrlKey, altKey, shiftKey, metaKey,
  button, relatedTarget
);

上面這些參數(shù)的含義风秤，參見(jiàn)MouseEvent構(gòu)造函數(shù)的部分鳖目。

模仿并觸發(fā)click事件的寫(xiě)法如下。

var simulateDivClick = document.createEvent('MouseEvents');

simulateDivClick.initMouseEvent('click',true,true,
  document.defaultView,0,0,0,0,0,false,
  false,false,0,null,null
);

divElement.dispatchEvent(simulateDivClick);

（2）UIEvent.initUIEvent()

UIEvent.initUIEvent()用來(lái)初始化一個(gè)UI事件缤弦。該方法必須在事件新建（document.createEvent方法）之后领迈、觸發(fā)（dispatchEvent方法）之前調(diào)用。

event.initUIEvent(type, canBubble, cancelable, view, detail)

該方法的參數(shù)含義碍沐，可以參見(jiàn)MouseEvent構(gòu)造函數(shù)的部分狸捅。其中，detail參數(shù)是一個(gè)數(shù)值累提，含義與事件類(lèi)型有關(guān)尘喝，對(duì)于鼠標(biāo)事件，這個(gè)值表示鼠標(biāo)按鍵在某個(gè)位置按下的次數(shù)刻恭。

var e = document.createEvent("UIEvent");
e.initUIEvent("click", true, true, window, 1);

參考鏈接

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 人面猴
    序言：七十年代末瞧省，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子鳍贾，更是在濱河造成了極大的恐慌鞍匾，老刑警劉巖，帶你破解...
    沈念sama閱讀 207,248評(píng)論 6贊 481
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場(chǎng)離奇詭異，居然都是意外死亡东帅，警方通過(guò)查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,681評(píng)論 2贊 381
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門(mén)梁棠，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)置森，“玉大人，你說(shuō)我怎么就攤上這事符糊≠旌＃” “怎么了？”我有些...
    開(kāi)封第一講書(shū)人閱讀 153,443評(píng)論 0贊 344
  • 道士緝兇錄：失蹤的賣(mài)姜人
    文/不壞的土叔 我叫張陵男娄，是天一觀的道長(zhǎng)行贪。 經(jīng)常有香客問(wèn)我，道長(zhǎng)模闲，這世上最難降的妖魔是什么建瘫？ 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 55,475評(píng)論 1贊 279
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮尸折，結(jié)果婚禮上啰脚，老公的妹妹穿的比我還像新娘。我一直安慰自己实夹，他們只是感情好橄浓，可當(dāng)我...
    茶點(diǎn)故事閱讀 64,458評(píng)論 5贊 374
  • 惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
    文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著收擦，像睡著了一般贮配。 火紅的嫁衣襯著肌膚如雪谍倦。 梳的紋絲不亂的頭發(fā)上塞赂，一...
    開(kāi)封第一講書(shū)人閱讀 49,185評(píng)論 1贊 284
  • 城市分裂傳說(shuō)
    那天，我揣著相機(jī)與錄音昼蛀，去河邊找鬼宴猾。 笑死，一個(gè)胖子當(dāng)著我的面吹牛叼旋，可吹牛的內(nèi)容都是我干的仇哆。 我是一名探鬼主播，決...
    沈念sama閱讀 38,451評(píng)論 3贊 401
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開(kāi)眼夫植，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼讹剔！你這毒婦竟也來(lái)了？” 一聲冷哼從身側(cè)響起详民，我...
    開(kāi)封第一講書(shū)人閱讀 37,112評(píng)論 0贊 261
  • 萬(wàn)榮殺人案實(shí)錄
    序言：老撾萬(wàn)榮一對(duì)情侶失蹤延欠，失蹤者是張志新（化名）和其女友劉穎，沒(méi)想到半個(gè)月后沈跨，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體由捎，經(jīng)...
    沈念sama閱讀 43,609評(píng)論 1贊 300
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,083評(píng)論 2贊 325
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年饿凛，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了狞玛。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片软驰。...
    茶點(diǎn)故事閱讀 38,163評(píng)論 1贊 334
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖心肪，靈堂內(nèi)的尸體忽然破棺而出锭亏，到底是詐尸還是另有隱情，我是刑警寧澤硬鞍，帶...
    沈念sama閱讀 33,803評(píng)論 4贊 323
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布贰镣，位于F島的核電站，受9級(jí)特大地震影響膳凝，放射性物質(zhì)發(fā)生泄漏碑隆。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,357評(píng)論 3贊 307
  • 男人毒藥：我在死后第九天來(lái)索命
    文/蒙蒙 一蹬音、第九天 我趴在偏房一處隱蔽的房頂上張望上煤。 院中可真熱鬧，春花似錦著淆、人聲如沸劫狠。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,357評(píng)論 0贊 19
  • 一樁弒父案永部，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)独泞。三九已至，卻和暖如春苔埋，著一層夾襖步出監(jiān)牢的瞬間懦砂，已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,590評(píng)論 1贊 261
  • 情欲美人皮
    我被黑心中介騙來(lái)泰國(guó)打工组橄， 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留荞膘，地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 45,636評(píng)論 2贊 355
  • 代替公主和親
    正文 我出身青樓玉工，卻偏偏與公主長(zhǎng)得像羽资，于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子遵班，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,925評(píng)論 2贊 344

推薦閱讀更多精彩內(nèi)容

  • 事件是一種異步編程的實(shí)現(xiàn)方式屠升，本質(zhì)上是程序各個(gè)組成部分之間的通信。DOM支持大量的事件狭郑，本節(jié)介紹DOM的事件編程腹暖。...
    周花花啊閱讀 592評(píng)論 0贊 3
  • 聲明：本文來(lái)源于http://www.webzsky.com/?p=731我只是在這里作為自己的學(xué)習(xí)筆記整理一下（...
    angryyan閱讀 6,953評(píng)論 1贊 6
  • DOM事件流（不適用于IE8及以下版本IE） “DOM2級(jí)事件”規(guī)定的事件流包括三個(gè)階段當(dāng)一個(gè)事件發(fā)生以后，它會(huì)在...
    jaminwong閱讀 357評(píng)論 0贊 1
  • 本節(jié)介紹各種常見(jiàn)的瀏覽器事件愿阐。 鼠標(biāo)事件 鼠標(biāo)事件指與鼠標(biāo)相關(guān)的事件微服，主要有以下一些。 click 事件，dblc...
    許先生__閱讀 2,420評(píng)論 0贊 4
  • 【02/14/2017周二第167天丁酉年正月十八】 ?靜√智√勇√仁√強(qiáng)√禮 小結(jié)以蕴。 √ 早上媽媽送我去上學(xué) 糙麦，...
    媽媽熊閱讀 198評(píng)論 0贊 1