建立或觸發事件

本文介紹如何建立和觸發事件。

建立自定義事件

事件可以用 Event constructor 建立,如下所示:

var event = new Event('build');

// 監聽事件
elem.addEventListener('build', function (e) { ... }, false);

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

除了 Internet Explorer 以外,大多數的瀏覽器都支持這個 constructor 。若要能夠支援 Internet Explore 的更詳細的方法,可以參考段落《早期的做法》。

增加自定義的資料--CustomEvent()

要在事件的 object 追加其他資料,能使用 CustomEvent 介面。它有 detail 屬性,可以用來傳送自訂資料。
舉例來說,可以以下面方式建立事件:

var event = new CustomEvent('build', { 'detail': elem.dataset.time });

它可以讓你傳送自訂資料到事件的監聽器:

function eventHandler(e) {
  log('The time is: ' + e.detail);
}

早期的做法

早期建立事件的方式參考了 Java 的 API 。下為一個早期作法的例子:

// 建立事件
var event = document.createEvent('Event');

// 設定事件名稱為 “build” 。
event.initEvent('build', true, true);

// 監聽事件
elem.addEventListener('build', function (e) {
  // e.target matches elem
}, false);

// 事件對象可以是任一 HTML 元素或是 EventTarget 。
elem.dispatchEvent(event);

觸發自定義事件

下面的例子演示了一個複選框藉由 DOM 的 methods 模擬一次點擊(換言之,讓程式執行一次「點擊事件」。)。 觀看實例

function simulateClick() {
  var event = new MouseEvent('click', {
    'view': window,
    'bubbles': true,
    'cancelable': true
  });
  var cb = document.getElementById('checkbox'); 
  var canceled = !cb.dispatchEvent(event);
  if (canceled) {
    // A handler called preventDefault.
    alert("canceled");
  } else {
    // None of the handlers called preventDefault.
    alert("not canceled");
  }
}

瀏覽器的支援度

 

Feature Chrome Firefox (Gecko) Edge Internet Explorer Opera Safari (WebKit)
Event() constructor 15 11 (Yes) No support 11.60 6
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? ? ? ? 6

延伸閱讀

文件標籤與貢獻者

 此頁面的貢獻者: jackblackevo, Shiyou
 最近更新: jackblackevo,