CustomEvent 客製一個 addEventListener

/

本篇要解決的問題

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

鏘鏘!就是這樣,喵~~

Summary
CustomEvent 客製一個 addEventListener
Article Name
CustomEvent 客製一個 addEventListener
Description
本篇大綱:本篇要解決的問題。製作一個 Demo。CustomEvent。在要的地方註冊客製事件。本篇就是實作一個自己的事件出來,主要參考文件:MDN:CustomEvent。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg

隨選筆記文

Analytics Google

GA:User-ID 功能 設定及報表檢視

API

Instagram Embedding 抓 iframe 高度及 3 種大小圖片

Forms Google

完全客製 Google 表單,美化表單樣式

Google Sheets

如何用 Google Sheets / Excel 當作資料庫

Front-End

Promise、Async、Await 基本使用筆記

PWA

PWA 學習筆記-1:Cache、Workbox 基本使用

Vue

拿 Trello 當資料庫 建一個店家清單 – 下篇:建立清單頁面

Vue

用 VuePress 製作說明文件頁面 – 6:部署

API Front-End

用 Google Apps Script 寫一個 LINE 登入功能:下篇 – 三大步驟

Google Sheets

Google Sheets 略過空白格重整資料

以下是留言,但關於留言的部份必需先讓你們知道:

本站的文章都是 August 因為覺得有趣,才會實作並整理成筆記文而後進行發表。

如果留言是希望把 Demo 改成「你想要」的樣子,或是把功能改成「符合你需求」的樣子,

Sorry~ 除非那修改是 August 也有興趣的,不然不會幫你們寫程式去面對工作或是交作業。

未來這類的留言不會再主動回覆。😎

另外,公開信箱是為了讓金流驗證用,

因為之前遇過幾次回信協助解決問題後,對方卻一聲謝謝也沒有,就這樣拿去幫工作交差。

因此決定不再回覆信件,有疑問就利用留言功能囉。