本文實例講述了JS中自定義事件的使用與觸發操作。分享給大家供大家參考，具體如下：

1. 事件的創建

JS中，最簡單的創建事件方法，是使用Event構造器：

var myEvent = new Event('event_name');

但是為了能夠傳遞數據，就需要使用 CustomEvent 構造器：

var myEvent = new CustomEvent('event_name', { detail:{  // 將需要傳遞的數據寫在detail中，以便在EventListener中獲取  // 數據將會在event.detail中得到 },});

2. 事件的監聽

JS的EventListener是根據事件的名稱來進行監聽的，比如我們在上文中已經創建了一個名稱為‘event_name' 的事件，那么當某個元素需要監聽它的時候，就需要創建相應的監聽器：

//假設listener注冊在window對象上window.addEventListener('event_name', function(event){ // 如果是CustomEvent，傳入的數據在event.detail中 console.log('得到數據為：', event.detail); // ...后續相關操作});

至此，window對象上就有了對‘event_name' 這個事件的監聽器，當window上觸發這個事件的時候，相關的callback就會執行。

3. 事件的觸發

對于一些內置（built-in）的事件，通常都是有一些操作去做觸發，比如鼠標單擊對應MouseEvent的click事件，利用鼠標（ctrl+滾輪上下）去放大縮小頁面對應WheelEvent的resize事件。
然而，自定義的事件由于不是JS內置的事件，所以我們需要在JS代碼中去顯式地觸發它。方法是使用 dispatchEvent 去觸發（IE8低版本兼容，使用fireEvent）：

// 首先需要提前定義好事件，并且注冊相關的EventListenervar myEvent = new CustomEvent('event_name', {  detail: { title: 'This is title!'},});window.addEventListener('event_name', function(event){ console.log('得到標題為：', event.detail.title);});// 隨后在對應的元素上觸發該事件if(window.dispatchEvent) {  window.dispatchEvent(myEvent);} else { window.fireEvent(myEvent);}// 根據listener中的callback函數定義，應當會在console中輸出 "得到標題為： This is title!"

需要特別注意的是，當一個事件觸發的時候，如果相應的element及其上級元素沒有對應的EventListener，就不會有任何回調操作。

對于子元素的監聽，可以對父元素添加事件托管，讓事件在事件冒泡階段被監聽器捕獲并執行。這時候，使用event.target就可以獲取到具體觸發事件的元素。

PS：這里再為大家附上javascript系統自帶事件參考表供大家參考查詢：

javascript事件與功能說明大全：
http://tools.jb51.net/table/javascript_event

更多關于JavaScript相關內容可查看本站專題：《JavaScript事件相關操作與技巧大全》、《JavaScript常用函數技巧匯總》、《javascript面向對象入門教程》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。