CustomEvent()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

CustomEvent() constructor 可用來建立 CustomEvent物件。

語法

javascript

new CustomEvent(type);
new CustomEvent(type, options);

參數

type

一個 DOMString 用來表示事件名稱。

options選擇性

一個繼承自Event()的參數，其類型為 object。它有以下參數

detail 選擇性: 用來表示事件相關的資訊。它能藉由 CustomEvent.detail 屬性來取得值。其默認值為null。

回傳值

一個 CustomEvent 物件。

範例

javascript

// create custom events
const catFound = new CustomEvent("animalfound", {
  detail: {
    name: "cat",
  },
});
const dogFound = new CustomEvent("animalfound", {
  detail: {
    name: "dog",
  },
});
// add an appropriate event listener
obj.addEventListener("animalfound", (e) => console.log(e.detail.name));
// dispatch the events
obj.dispatchEvent(catFound);
obj.dispatchEvent(dogFound);
// "cat" and "dog" logged in the console

可於 Creating and triggering events 找到更多範例。

規格

Specification
DOM # ref-for-dom-customevent-customevent

瀏覽器支援度

其他

添加額外參數

在 Internet Explorer 9 或更高的版本，你可以用以下的方法給 CustomEvent() constructor 添加額外參數

javascript

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