JavaScript創建和觸發自定義事件

第一種使用Event構造函數創建事件：

event = new Event(typeArg, eventInit);

typeArg：指定事件類型，傳遞一個字符串。這里的事件類型指的是像點擊事件（click）、提交事件（submit）、加載事件（load）等等。

eventInit：可選，傳遞EventInit類型的字典。實際上這個EventInit類型的字典也就是我們使用InitEvent()時需要傳遞的參數，以鍵值對的形式傳遞，不過它可以多選一個參數：

bubbles：事件是否支持冒泡，傳遞一個boolean類型的參數，默認值為false。

cancelable：是否可取消事件的默認行為，傳遞一個boolean類型的參數，默認值為false。

composed：事件是否會觸發shadow DOM（陰影DOM）根節點之外的事件監聽器，傳遞一個boolean類型的參數，默認值為false。

const event = new Event('build');

// Listen for the event.
elem.addEventListener('build', function (e) { /* ... */ }, false);

// Dispatch the event.
elem.dispatchEvent(event);

不適用Internet Explorer瀏覽器

第二種CustomEvent對象的構造函數

CustomEvent()可以像Event()那樣賦值，但它可以在Web Workers中使用（與主線程分離的另一個線程），可以傳遞跟事件關聯的相關值（detail）

event = new CustomEvent(typeArg, customEventInit);

typeArg一個表示 event 名字的字符串

customEventInit可選

detail：可選的默認值是 null 的任意類型數據，是一個與 event 相關的值

bubbles：一個布爾值，表示該事件能否冒泡。 來自EventInit注意：測試chrome默認為不冒泡。

cancelable：一個布爾值，表示該事件是否可以取消。 來自EventInit

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

第三種使用document.createEvent

document.createEvent用於創建事件，這是過時的方式

為DOM元素創建自定義事件的步驟為：

• 一、創建事件：var ev = document.createEvent('CustomEvent')或者document.createEvent('Event');
• 二、初始化事件：ev.initCustomEvent('自定義事件名稱', false(是否允許冒泡), false(是否允許中斷),args)
• 三、為DOM添加事件監聽：element.addEventListener('自定義事件名稱',fn,false)
• 四、分發(觸發)自定義事件：element.dispatchEvent(ev)

window.addEventListener('testEvent',(data) => {
  console.log('testEvent', data)
})
setTimeout(() => {
  eventItem = document.createEvent('CustomEvent');
  eventItem.initCustomEvent('testEvent', true, true);
  eventItem.data = {"data":'1'};
  window.dispatchEvent(eventItem)
}, 5000)