CustomEvent 客製一個 addEventListener

本篇大綱

本篇要解決的問題

製作一個 Demo

CustomEvent

在要的地方註冊客製事件

本篇要解決的問題

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

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

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

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

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

MDN：CustomEvent

製作一個 Demo

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

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

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

커스텀 이벤트

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 是要放哪?想說有可能看到逽來,不知道 obj 是要放哪?想說有可能看到逽䀽種困擾,就寫了這段.

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

document.dispatchEvent(event);

에서 문서상에 是寫:

obj.dispatchEvent(event);

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

結果,把 document 寫上 input 後,一開始熊熊轉不過來的地方就又熊熊轉了過來(熊好忙 XD).

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

CodePen에서 데모,是當 CustomEvent

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

鏘鏘!就是這樣,喵~~