banner
本文同步本人掘金平臺的原創翻譯：https：//juejin。cn/post/7091657693362356255
你肯定處理過很多的事件監聽，比如點選事件或者表單提交。事件監聽對許多用例來說很有幫助，但是有時我們需要建立自己的自定義事件來處理複雜的互動。在這片短文中，我將告訴你有關建立自定義事件，偵聽自定義事件以及建立雙擊自定義事件所要了解的內容。
怎麼建立自定義事件
建立自定義事件聽起來很困難，但是隻需要下面簡單的一行程式碼即可。
const myEvent = new Event（“myCustomEvent”）複製程式碼
你可以透過事件建構函式建立一個新的 Event 物件。在最基本的形式中，你只需要將一個字串傳遞給建構函式，這個字串就是你定義的事件名稱。為了監聽這個事件，你可以將該事件監聽器新增到你要監聽的元素上，如下：
document。addEventListener（“myCustomEvent”， e => { console。log（e）}）複製程式碼
最後一步，你需要做的事，觸發建立並正在監聽的事件。
document。dispatchEvent（myEvent）複製程式碼
這就需呀 dispatchEvent 函數了。每個元素都有這個方法，你要做的就是將你建立的物件傳遞給它。
如果我們將上面講的組合在一起，我們就得到了一個基本的事件，這個事件在我們的 document 元素觸發，相關的事件內容會被打印出來。
圖中是這個事件物件的最基本形式。它包含大量資訊，最重要的部分我這裡突出顯示了。
isTrusted
屬性僅指該事件是由使用者互動觸發，還是由自定義 JavaScript 程式碼觸發的。例如，當用戶單擊按鈕時，事件將 isTrusted 設定為 true，而我們自定義的事件會將其設定為 false，因為該事件是由 JavaScript 觸發的。
target
指呼叫 dispatchEvent 函式的元素。
type
指事件的名稱。
事件定製
你可能注意到了，上面的詳情中有屬性 bubbles， cancelable 和 composed 屬性。這些實際上，在我們建立自定義事件時可以配置的選項。
const myEvent = new Event（“myCustomEvent”， { bubbles： true， cancelable： true， composed： true}）複製程式碼
冒泡 bubbles
當事件觸發後，bubbles 屬性決定這個事件是否可以透過 HTML 進行冒泡。這個值預設為 false，這意味著不可以進行冒泡行為，如果你想事件呼叫父 HTML 元素，你可以將其設定為 true。
const bubbleEvent = new Event（“bubbleEvent”， { bubbles： true }）const defaultEvent = new Event（“defaultEvent”， { bubbles： false }）document。addEventListener（“bubbleEvent”， （） => { // This will get called since the event will bubble up to the document from the button console。log（“Bubble”）}）document。addEventListener（“defaultEvent”， （） => { // This never gets called since the event cannot bubble up to the document from the button console。log（“Default”）}）const button = document。querySelector（“button”）button。dispatchEvent（bubbleEvent）button。dispatchEvent（defaultEvent）複製程式碼
可取消 cancelable
cancelable 屬性決定事件是否可以透過呼叫 e。preventDefault（） 取消。預設是 false 不可以。如果該屬性是 true 值，你可以呼叫 e。preventDefault（） 方法。e。preventDefault（） 會將事件 defaultPrevented 屬性設定為 true。
const cancelableEvent = new Event（“cancelableEvent”， { cancelable： true }）const defaultEvent = new Event（“defaultEvent”， { cancelable： false }）document。addEventListener（“cancelableEvent”， e => { e。preventDefault（） console。log（e。defaultPrevented） // True}）document。addEventListener（“defaultEvent”， e => { e。preventDefault（） console。log（e。defaultPrevented） // False}）document。dispatchEvent（cancelableEvent）document。dispatchEvent（defaultEvent）複製程式碼
組合 composed
composed 屬性決定事件是否可以透過影子 DOM 向上傳播。預設值是 false。 該屬性僅在你使用自定 HTML 元素和影子 DOM 的時候才適用，它所做的是允許事件在影子 DOM 外面傳播。如果你想在影子 DOM 中觸發的事件可以在影子 DOM 外被捕捉到，就將其設定為 true。
沒聽懂沒關係，後面學著學著就懂了
給事件傳遞自定義資料
當你使用自定事件時，你希望自定義的資料傳遞給你的事件。使用 new Event 建構函式是不可能的，這也就是為什麼會有第二種建立事件的方法。
const myEvent = new CustomEvent（“myEvent”， { detail： { hello： “World” } }）複製程式碼
CustomEvent 建構函式取代 Event 建構函式。這與 new Event 的工作方式相同，但你可以將 detail 屬性以及 bubbles，cancelable 和 composed屬性一起傳遞給第二個引數。detail 屬性中你設定的內容都會傳遞給事件監聽器。
const myEvent = new CustomEvent（“myEvent”， { detail： { hello： “World” } }）document。addEventListener（“myEvent”， e => { console。log（e。detail） // { hello： “World” }}）document。dispatchEvent（myEvent）複製程式碼
命名約定
在我們講自定義雙擊事件的例子前，我想先講講命名約定。你可以為自定義事件命名任何你想要的名字，但是還是遵循命名約定，以更方便使用自己的程式碼。最普遍的命名約定事件，是為事件新增 custom： 字首。
custom： 以區分自定義事件和本身的事件，而且，如果 JavaScript 新增與你的事件同名的新事件，它還可以確保你的程式碼不會中斷。舉個例子，如果 JavaScript 添加了一個名為 doubleclick 事件，然後你已經在時候 doubleclick 自定義事件了，那麼你會遇到問題，因為你自定義程式碼將觸發該事件，並且瀏覽器也會嘗試觸發它自己的副本。
// Always use some form of naming conventionconst myEvent = new Event（“custom：doubleClick”）複製程式碼
雙擊事件
在這個例子中，我們將建立一個雙擊的事件，只要你在短時間內單擊一個元素，就會觸發該事件。該事件還會將按鈕單擊之間的總時間作為自定義資料傳遞。
首先，我們需要建立一個正常的單擊事件監聽器來確保是否有雙擊。
const button = document。querySelector（“button”）const MAX_DOUBLE_CLICK_TIME = 500let lastClick = 0button。addEventListener（“click”， e => { const timeBetweenClicks = e。timeStamp - lastClick if （timeBetweenClicks > MAX_DOUBLE_CLICK_TIME） { lastClick = e。timeStamp return } // TODO： Double click happened。 Trigger custom event。 lastClick = 0}）複製程式碼
上面的程式碼使用 timeStamp 屬性來確保按鈕上單擊事件之間的時間。如果點選之間的時間超過 500 毫秒。則會立刻返回並更新 lastClick 的值。一旦我們在 500 毫秒內點選了兩次，我們將透過 if 檢查並觸發我們的雙擊事件。為此，我們需要建立我們的事件並呼叫它。
對於我們自定義的事件，我們將所有選項都設定為 true，因為預設情況下，單擊事件將所有這些屬性設定為 true，而且我們希望雙擊的行為類似於正常的單擊。我們也將 timeBetweenClicks 傳遞到 detail 選項中。最後，我們在事件的目標上排程事件，這裡是按鈕元素。我們剩下要做的最後一件事就是監聽事件。
我們剛剛向按鈕田間了一個簡單的事件監聽器，它將打印出 Double Click 之間的時間。
總結
自定義事件是 JavaScript 中處理手勢和雙擊事件的好方案，最重要的是，他們非常容易實現和使用。
本文為譯文，採用意譯
【完】✅