怎么創建 JavaScript 自定義事件
你肯定處理過很多的事件監聽，比如點擊事件或者表單提交。事件監聽對許多用例來說很有幫助，但是有時我們需要創建自己的自定義事件來處理復雜的交互。
怎么創建自定義事件
創建自定義事件聽起來很困難，但是只需要下面簡單的一行代碼即可。
const myEvent = new Event("myCustomEvent")
你可以通過事件構造函數創建一個新的 Event 對象。在最基本的形式中，你只需要將一個字符串傳遞給構造函數，這個字符串就是你定義的事件名稱。為了監聽這個事件，你可以將該事件監聽器添加到你要監聽的元素上，如下：
document.addEventListener("myCustomEvent", e => {
console.log(e)
})
最后一步，你需要做的事，觸發創建并正在監聽的事件。
document.dispatchEvent(myEvent)
這就需呀 dispatchEvent 函數了。每個元素都有這個方法，你要做的就是將你創建的對象傳遞給它。
如果我們將上面講的組合在一起，我們就得到了一個基本的事件，這個事件在我們的 document 元素觸發，相關的事件內容會被打印出來。
{
isTrusted: false
bubbles: false
cancelBubble: false
cancelable: false
composed: false
currentTarget: null
defaultPrevented: false
eventPhase: 0
path: [document, window]
returnValue: true
srcElement: document
target: document
timeStamp: 54.69999998807907
type: "myCustomEvent"
}
圖中是這個事件對象的最基本形式。它包含大量信息，最重要的部分我這里突出顯示了。
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 convention
const myEvent = new Event("custom:doubleClick")
雙擊事件
在這個例子中，我們將創建一個雙擊的事件，只要你在短時間內單擊一個元素，就會觸發該事件。該事件還會將按鈕單擊之間的總時間作為自定義數據傳遞。
首先，我們需要創建一個正常的單擊事件監聽器來確保是否有雙擊。
const button = document.querySelector("button")
const MAX_DOUBLE_CLICK_TIME = 500
let lastClick = 0
button.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 檢查并觸發我們的雙擊事件。為此，我們需要創建我們的事件并調用它。
const button = document.querySelector("button")
const MAX_DOUBLE_CLICK_TIME = 500
let lastClick = 0
button.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
})
對于我們自定義的事件，我們將所有選項都設置為 true，因為默認情況下，單擊事件將所有這些屬性設置為 true，而且我們希望雙擊的行為類似于正常的單擊。
我們也將 timeBetweenClicks 傳遞到 detail 選項中。
最后，我們在事件的目標上調度事件，這里是按鈕元素。我們剩下要做的最后一件事就是監聽事件。
onst button = document.querySelector("button")
const MAX_DOUBLE_CLICK_TIME = 500
let lastClick = 0
button.addEventListener("click", e => {
const timeBetweenClicks = e.timeStamp - lastClick
if (timeBetweenClicks > MAX_DOUBLE_CLICK_TIME) {
lastClick = e.timeStamp
return
}
const doubleClickEvent = new CustomEvent("custom:doubleClick", {
bubbles: true,
cancelable: true,
composed: true,
detail: { timeBetweenClicks },
})
e.target.dispatchEvent(doubleClickEvent)
lastClick = 0
})
我們剛剛向按鈕田間了一個簡單的事件監聽器，它將打印出 Double Click 之間的時間。
總結
自定義事件是 JavaScript 中處理手勢和雙擊事件的好方案，最重要的是，他們非常容易實現和使用。
