JavaScript 事件模型

2018-07-24 11:52 更新

目錄

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

EventTarget接口

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

該接口就是三個方法。

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

addEventListener()

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

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

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

addEventListener方法接受三個參數(shù)。

  • type:事件名稱,大小寫敏感。
  • listener:監(jiān)聽函數(shù)。事件發(fā)生時,會調(diào)用該監(jiān)聽函數(shù)。
  • useCapture:布爾值,表示監(jiān)聽函數(shù)是否在捕獲階段(capture)觸發(fā)(參見后文《事件的傳播》部分),默認為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方法可以為當前對象的同一個事件,添加多個監(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ù),必須與對應的addEventListener方法的參數(shù)完全一致,而且必須在同一個元素節(jié)點,否則無效。

dispatchEvent()

dispatchEvent方法在當前節(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);

上面代碼在當前節(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標簽的on-屬性

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

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

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

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

注意,使用這種方法時,on-屬性的值是將會執(zhí)行的代碼,而不是一個函數(shù)。

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

<!-- 錯誤 -->
<body onload="doSomething">

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

另外,Element元素節(jié)點的setAttribute方法,其實設置的也是這種效果。

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方法的詳細介紹,參見本節(jié)EventTarget接口的部分。

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

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

  • 可以針對同一個事件,添加多個監(jiān)聽函數(shù)。

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

  • 除了DOM節(jié)點,還可以部署在windowXMLHttpRequest等對象上面,等于統(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é)點的一個屬性,所以this指向節(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í)行,相當于下面的代碼。

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

一種解決方法是,不引入函數(shù)作用域,直接在on-屬性寫入所要執(zhí)行的代碼。因為on-屬性是在當前節(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()">

事件的傳播

傳播的三個階段

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

  • 第一階段:從window對象傳導到目標節(jié)點,稱為“捕獲階段”(capture phase)。

  • 第二階段:在目標節(jié)點上觸發(fā),稱為“目標階段”(target phase)。

  • 第三階段:從目標節(jié)點傳導回window對象,稱為“冒泡階段”(bubbling phase)。

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

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

如果對這兩個節(jié)點的click事件都設定監(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次。

  1. 捕獲階段:事件從<div><p>傳播時,觸發(fā)<div>click事件;
  2. 目標階段:事件從<div>到達<p>時,觸發(fā)<p>click事件;
  3. 目標階段:事件離開<p>時,觸發(fā)<p>click事件;
  4. 冒泡階段:事件從<p>傳回<div>時,再次觸發(fā)<div>click事件。

注意,用戶點擊網(wǎng)頁的時候,瀏覽器總是假定click事件的目標節(jié)點,就是點擊位置的嵌套最深的那個節(jié)點(嵌套在<div>節(jié)點的<p>節(jié)點)。所以,<p>節(jié)點的捕獲階段和冒泡階段,都會顯示為target階段。

事件傳播的最上層對象是window,接著依次是documenthtmldocument.documentElement)和bodydocument.dody)。也就是說,如果<body>元素中有一個<div>元素,點擊該元素。事件的傳播順序,在捕獲階段依次為window、document、html、body、div,在冒泡階段依次為div、body、htmldocument、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事件在冒泡階段到達<p>節(jié)點以后,就不再向上(父節(jié)點的方向)傳播了。

但是,stopPropagation方法只會阻止當前監(jiān)聽函數(shù)的傳播,不會阻止<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:布爾值,可選,默認為false,表示事件對象是否冒泡。
  • cancelable:布爾值,可選,默認為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;
  // ...
}

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

event.bubbles,event.eventPhase

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

(1)bubbles

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

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

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

(2)event.eventPhase

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

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

event.cancelable,event.defaultPrevented

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

(1)cancelable

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

var bool = event.cancelable;

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

(2)defaultPrevented

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

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

event.currentTarget,event.target

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

(1)currentTarget

currentTarget屬性返回事件當前所在的節(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é)點,導致em子節(jié)點(即World部分)會不可見,且輸出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

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

(1)type

type屬性返回一個字符串,表示事件類型,大小寫敏感。

var string = event.type;

(2)detail

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

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

el.onclick = giveDetails;

(3)timeStamp

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

var number = event.timeStamp;

Chrome在49版以前,這個屬性返回的是一個整數(shù),單位是毫秒(millisecond),表示從Unix紀元開始的時間戳。從49版開始,該屬性返回的是一個高精度時間戳,也就是說,毫秒之后還帶三位小數(shù),精確到微秒。并且,這個值不再從Unix紀元開始計算,而是從PerformanceTiming.navigationStart開始計算,即表示距離用戶導航至該網(wǎng)頁的時間。如果想將這個值轉(zhuǎn)為Unix紀元時間戳,就要計算event.timeStamp + performance.timing.navigationStart。

下面是一個計算鼠標移動速度的例子,顯示每秒移動的像素數(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屬性返回一個布爾值,表示該事件是否為真實用戶觸發(fā)。

var bool = event.isTrusted;

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

event.preventDefault()

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

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

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

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

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

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

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

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

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

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

event.stopPropagation()

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

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

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

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

event.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)用。

自定義事件和事件模擬

除了瀏覽器預定義的那些事件,用戶還可以自定義事件,然后手動觸發(fā)。

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

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

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

上面代碼觸發(fā)了自定義事件,該事件會層層向上冒泡。在冒泡過程中,如果有一個元素定義了該事件的監(jiān)聽函數(shù),該監(jiān)聽函數(shù)就會觸發(fā)。

由于IE不支持這個API,如果在IE中自定義事件,需要使用后文的“老式方法”。

CustomEvent()

Event構(gòu)造函數(shù)只能指定事件名,不能在事件上綁定數(shù)據(jù)。如果需要在觸發(fā)事件的同時,傳入指定的數(shù)據(jù),需要使用CustomEvent構(gòu)造函數(shù)生成自定義的事件對象。

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

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

下面是另一個例子。

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不支持這個方法,可以用下面的墊片函數(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;
})();

事件的模擬

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

下面是一個通過MouseEvent構(gòu)造函數(shù),模擬觸發(fā)click鼠標事件的例子。

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

自定義事件的老式寫法

老式瀏覽器不一定支持各種類型事件的構(gòu)造函數(shù)。因此,有時為了兼容,會用到一些非標準的方法。這些方法未來會被逐步淘汰,但是目前瀏覽器還廣泛支持。除非是為了兼容老式瀏覽器,盡量不要使用。

(1)document.createEvent()

document.createEvent方法用來新建指定類型的事件。它所生成的Event實例,可以傳入dispatchEvent方法。

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

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

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

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

createEvent方法接受一個字符串作為參數(shù),可能的值參見下表“數(shù)據(jù)類型”一欄。使用了某一種“事件類型”,就必須使用對應的事件初始化方法。

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

(2)event.initEvent()

事件對象的initEvent方法,用來初始化事件對象,還能向事件對象添加屬性。該方法的參數(shù)必須是一個使用Document.createEvent()生成的Event實例,而且必須在dispatchEvent方法之前調(diào)用。

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

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

  • type:事件名稱,格式為字符串。
  • bubbles:事件是否應該冒泡,格式為布爾值??梢允褂胑vent.bubbles屬性讀取它的值。
  • cancelable:事件是否能被取消,格式為布爾值??梢允褂胑vent.cancelable屬性讀取它的值。
  • option:為事件對象指定額外的屬性。

事件模擬的老式寫法

事件模擬的非標準做法是,對document.createEvent方法生成的事件對象,使用對應的事件初始化方法進行初始化。比如,click事件對象屬于MouseEvent對象,也屬于UIEvent對象,因此要用initMouseEvent方法或initUIEvent方法進行初始化。

(1)event.initMouseEvent()

initMouseEvent方法用來初始化Document.createEvent方法新建的鼠標事件。該方法必須在事件新建(document.createEvent方法)之后、觸發(fā)(dispatchEvent方法)之前調(diào)用。

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

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

上面這些參數(shù)的含義,參見MouseEvent構(gòu)造函數(shù)的部分。

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

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()用來初始化一個UI事件。該方法必須在事件新建(document.createEvent方法)之后、觸發(fā)(dispatchEvent方法)之前調(diào)用。

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

該方法的參數(shù)含義,可以參見MouseEvent構(gòu)造函數(shù)的部分。其中,detail參數(shù)是一個數(shù)值,含義與事件類型有關(guān),對于鼠標事件,這個值表示鼠標按鍵在某個位置按下的次數(shù)。

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

參考鏈接

以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號