相信大家肯定處理過(guò)很多的事件監(jiān)聽(tīng)，比如點(diǎn)擊事件或者表單提交。事件監(jiān)聽(tīng)對(duì)許多用例來(lái)說(shuō)很有幫助，但是有時(shí)我們需要?jiǎng)?chuàng)建自己的自定義事件來(lái)處理復(fù)雜的交互。

怎么創(chuàng)建自定義事件

創(chuàng)建自定義事件聽(tīng)起來(lái)很困難，但是只需要下面簡(jiǎn)單的一行代碼即可。

const myEvent = new Event("myCustomEvent")

我們可以通過(guò)事件構(gòu)造函數(shù)創(chuàng)建一個(gè)新的 Event 對(duì)象。在最基本的形式中，你只需要將一個(gè)字符串傳遞給構(gòu)造函數(shù)，這個(gè)字符串就是你定義的事件名稱(chēng)。為了監(jiān)聽(tīng)這個(gè)事件，你可以將該事件監(jiān)聽(tīng)器添加到你要監(jiān)聽(tīng)的元素上，

如下：

document.addEventListener("myCustomEvent", e => {
  console.log(e)
})

最后一步，你需要做的事，觸發(fā)創(chuàng)建并正在監(jiān)聽(tīng)的事件。

document.dispatchEvent(myEvent)

這就需呀dispatchEvent 函數(shù)了。每個(gè)元素都有這個(gè)方法，你要做的就是將你創(chuàng)建的對(duì)象傳遞給它。

如果我們將上面講的組合在一起，我們就得到了一個(gè)基本的事件，這個(gè)事件在document元素觸發(fā)，相關(guān)的事件內(nèi)容會(huì)被打印出來(lái)。

{
  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"
}

圖中是這個(gè)事件對(duì)象的最基本形式。它包含大量信息，最重要的部分我這里突出顯示了。

isTrusted 屬性僅指該事件是由用戶交互觸發(fā)，還是由自定義 JavaScript 代碼觸發(fā)的。例如，當(dāng)用戶單擊按鈕時(shí)，事件將 isTrusted 設(shè)置為 true，而我們自定義的事件會(huì)將其設(shè)置為 false，因?yàn)樵撌录怯?JavaScript 觸發(fā)的。

target 指調(diào)用 dispatchEvent 函數(shù)的元素。

type 指事件的名稱(chēng)。

事件定制

可以看到，上面的詳情中有屬性 bubbles, cancelable 和 composed 屬性。這些實(shí)際上，在我們創(chuàng)建自定義事件時(shí)可以配置的選項(xiàng)。

const myEvent = new Event("myCustomEvent", {
  bubbles: true,
  cancelable: true,
  composed: true
})

冒泡 bubbles

當(dāng)事件觸發(fā)后，bubbles 屬性決定這個(gè)事件是否可以通過(guò) html 進(jìn)行冒泡。這個(gè)值默認(rèn)為 false，這意味著不可以進(jìn)行冒泡行為，如果我們想事件調(diào)用父 HTML 元素，可以將其設(shè)置為 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 屬性決定事件是否可以通過(guò)調(diào)用 e.preventDefault() 取消。默認(rèn)是 false 不可以。如果該屬性是 true 值，你可以調(diào)用 e.preventDefault() 方法。e.preventDefault() 會(huì)將事件 defaultPrevented 屬性設(shè)置為 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 屬性決定事件是否可以通過(guò)影子 dom 向上傳播。默認(rèn)值是 false。該屬性僅在你使用自定 HTML 元素和影子 DOM 的時(shí)候才適用，它所做的是允許事件在影子 DOM 外面?zhèn)鞑ァ?/p>

如果想在影子 DOM 中觸發(fā)的事件可以在影子 DOM 外被捕捉到，就將其設(shè)置為 true。

沒(méi)聽(tīng)懂沒(méi)關(guān)系，后面學(xué)著學(xué)著就懂了

給事件傳遞自定義數(shù)據(jù)

當(dāng)我們使用自定事件時(shí)，希望自定義的數(shù)據(jù)傳遞給你的事件。使用 new Event 構(gòu)造函數(shù)是不可能的，這也就是為什么會(huì)有第二種創(chuàng)建事件的方法。

const myEvent = new CustomEvent("myEvent", { detail: { hello: "World" } })

CustomEvent 構(gòu)造函數(shù)取代 Event 構(gòu)造函數(shù)。這與 new Event 的工作方式相同，但你可以將 detail 屬性以及 bubbles，cancelable 和 composed屬性一起傳遞給第二個(gè)參數(shù)。detail 屬性中你設(shè)置的內(nèi)容都會(huì)傳遞給事件監(jiān)聽(tīng)器。

const myEvent = new CustomEvent("myEvent", { detail: { hello: "World" } })
document.addEventListener("myEvent", e => {
  console.log(e.detail) // { hello: "World" }
})
document.dispatchEvent(myEvent)

命名約定

在講自定義雙擊事件的例子前，先看看命名約定。我們可以為自定義事件命名任何想要的名字，但是還是遵循命名約定，以更方便使用自己的代碼。最普遍的命名約定事件，是為事件添加 custom: 前綴。

custom: 以區(qū)分自定義事件和本身的事件，而且，如果 JavaScript 添加與你的事件同名的新事件，它還可以確保你的代碼不會(huì)中斷。

舉個(gè)例子，如果 JavaScript 添加了一個(gè)名為 doubleclick 事件，然后你已經(jīng)在時(shí)候 doubleclick 自定義事件了，那么會(huì)遇到問(wèn)題，因?yàn)槲覀冏远x代碼將觸發(fā)該事件，并且瀏覽器也會(huì)嘗試觸發(fā)它自己的副本。

// Always use some form of naming convention
const myEvent = new Event("custom:doubleClick")

雙擊事件

在這個(gè)例子中，我們將創(chuàng)建一個(gè)雙擊的事件，只要在短時(shí)間內(nèi)單擊一個(gè)元素，就會(huì)觸發(fā)該事件。該事件還會(huì)將按鈕單擊之間的總時(shí)間作為自定義數(shù)據(jù)傳遞。

首先，我們需要?jiǎng)?chuàng)建一個(gè)正常的單擊事件監(jiān)聽(tīng)器來(lái)確保是否有雙擊。

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 屬性來(lái)確保按鈕上單擊事件之間的時(shí)間。如果點(diǎn)擊之間的時(shí)間超過(guò) 500 毫秒。

則會(huì)立刻返回并更新 lastClick 的值。一旦我們?cè)?500 毫秒內(nèi)點(diǎn)擊了兩次，我們將通過(guò) if 檢查并觸發(fā)我們的雙擊事件。為此，我們需要?jiǎng)?chuàng)建我們的事件并調(diào)用它。

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

對(duì)于自定義的事件，我們將所有選項(xiàng)都設(shè)置為 true，因?yàn)槟J(rèn)情況下，單擊事件將所有這些屬性設(shè)置為 true，而且我們希望雙擊的行為類(lèi)似于正常的單擊。也將 timeBetweenClicks 傳遞到 detail 選項(xiàng)中。

最后，在事件的目標(biāo)上調(diào)度事件，這里是按鈕元素。剩下要做的最后一件事就是監(jiān)聽(tīng)事件。

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

剛剛向按鈕田間了一個(gè)簡(jiǎn)單的事件監(jiān)聽(tīng)器，它將打印出 Double Click 之間的時(shí)間。