本篇要解決的問題
之前 August 在公司寫了一整包會員登入的功能,原本以為如果有其他前端,只要知道員會登入了沒就可以,直到最近二位前端也進來要使用功能了,才發現需要寫一些事件出來讓他們二位可以監聽,因為他們必須在登入的中間做些其它事。
我們很常在寫像是以下的監聽事件:
window.addEventListener('load', () => {}')
但,很少在寫自己的事件,好啦,是 August 本人還沒寫過 XD。
本篇就是實作一個自己的事件出來,主要參考文件:
製作一個 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) } })
鏘鏘!就是這樣,喵~~