Javascript自定義事件new Event()與new CustomEvent()

1.CustomEvent構造函數（事件是由程序創建的，可以有任意自定義功能的事件，此特性在 Web Worker 中可用）

new CustomEvent(typeArg,customEventInit);

　　

typeArg:一個表示event名字的字符串
customEventInit：（可選）一個字典類型參數，有如下字段：

• detail:可選的默認值是 null 的任意類型數據，是一個與 event 相關的值（向事件對象添加更多數據）
• bubbles:一個布爾值，表示該事件能否冒泡。注意：測試chrome默認為不冒泡。
• cancelable:一個布爾值，表示該事件是否可以取消。

CustomerEventInit 字典參數同樣接受來自於 Event 類構造函數的 eventInit 字典參數bubbles和cancelable

// add an appropriate event listener
obj.addEventListener("cat", function(e) { process(e.detail) });

// create and dispatch the event
var event = new CustomEvent("cat", {
    detail: {
            hazcheeseburger: true
    }
});
obj.dispatchEvent(event);

　　

2.Event()構造函數

new Event(typeArg[, eventInit]);

typeArg：是DOMString 類型，表示所創建事件的名稱。
eventInit：（可選）是 EventInit 類型的字典，接受以下字段:

• "bubbles"，可選，Boolean類型，默認值為 false，表示該事件是否冒泡。
• "cancelable"，可選，Boolean類型，默認值為 false， 表示該事件能否被取消。
• "composed"，可選，Boolean類型，默認值為 false，指示事件是否會在影子DOM根節點之外觸發偵聽器。

// create a look event that bubbles up and cannot be canceled
var evt = new Event("look", {"bubbles":true, "cancelable":false});
document.dispatchEvent(evt);

// event can be dispatched from any element, not only the document
myDiv.dispatchEvent(evt);

　　

3.createEvent（被廢棄掉了)

// Create the event.(被廢棄掉了)
var event = document.createEvent('Event');

// Create a click event that bubbles up and
// cannot be canceled 
event.initEvent('click', true, false);

// Listen for the event.
elem.addEventListener('click', function (e) {
  // e.target matches elem
}, false);
elem.dispatchEvent(event);

　　mdn: https://developer.mozilla.org/zh-CN/docs/Web/API/CustomEvent/CustomEvent