CustomEvent 客製一個 addEventListener

本篇大綱

• 本篇要解決的問題
• 製作一個 Demo
• CustomEvent
• 在要的地方註冊客製事件

本篇要解決的問題

之前 August 在公司寫了一整包會員登入的功能，原本以為如果有其他前端，只要知道員會登入了沒就可以，直到最近二位前端也進來要使用功能了，才發現需要寫一些事件出來讓他們二位可以監聽，因為他們必須在登入的中間做些其它事。

我們很常在寫像是以下的監聽事件：

window.addEventListener('load', () => {}')

但，很少在寫自己的事件，好啦，是 August 本人還沒寫過 XD。

本篇就是實作一個自己的事件出來，主要參考文件：

MDN：CustomEvent

製作一個 Demo

先來製作一個 Demo 來實作，Demo 的內容是會有一個 input，當 input 裡面輸入了 letswrite 時，按下「確認」按鈕後就會 alert 一個現在的時間。

Demo 的部份 August 直接在寫 CodePen 上：

https://codepen.io/letswrite/pen/OJxZJYq

CustomEvent

CustomEvent 的寫法是這樣：

const event = new CustomEvent("custom_event_name", {
  detail: '可以傳出去的值'
});
document.dispatchEvent(event);

要監聽我們上面這段註冊的事件是這樣：

document.addEventListener('custom_event_name', e => {
  console.log(e.detail); // => 可以傳出去的值
})

custom_event_name：就是自己取一個事件的名稱，取一個看了知道是做什麼的名稱就行。

detail：是當事件被觸發時，可以傳出去的值，上面的範例是偷懶寫成：

detail: '可以傳出去的值'

實際上也可以傳更多的資料出去，像這樣：

detail: {
  name: "Let's Write",
  uri: "https://www.letswrite.tw",
  author: "August"
}

在 CodePen 上 August 寫的範例是把當下的時間給傳出去。

CustomEvent 的 option 還有很多的參數可以用，就請各位自行去看 MDN 的文件囉。

在要的地方註冊客製事件

這段算是 August 給自己的一個紀錄，在看文件時，不知道為什麼就是熊熊轉不過來，不知道 CustomEvent 是要放哪？想說有可能看到這篇的 你 / 妳 也會有這種困擾，就寫了這段。

因為上面範例程式碼的那行：

document.dispatchEvent(event);

在文件上是寫：

obj.dispatchEvent(event);

想了 obj 是要寫什麼想了老半天，為了在以後回頭看這篇時可以立馬搞懂，範例上才會直接寫為 document。

結果，把 obj 寫上 document 後，一開始熊熊轉不過來的地方就又熊熊轉了過來（熊好忙 XD）。

那要把我們想監聽的客製事件放在哪呢？就放在「做了什麼事情時」的那邊。

比方本篇在 CodePen 上的 Demo，是當 input 被輸入了 letswrite 時要執行，那就把 CustomEvent 放在那邊，本篇 Demo 的程式碼如下：

const input = document.getElementById('input');
const btn = document.getElementById('button');

btn.addEventListener('click', e => {
  let value = input.value;

  // 當 input 被輸入了 letswrite 時
  if(value === 'letswrite') {
    // 註冊客製事件
    let eventDemo = new CustomEvent('letswrite', {
      detail: new Date()
    })
    document.dispatchEvent(eventDemo)
  }
})

鏘鏘！就是這樣，喵~~