欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

如何創(chuàng)建?JavaScript?自定義事件

 更新時間：2022年05月07日 11:15:38   作者：龐桂玉  
這篇文章主要介紹了如何創(chuàng)建?JavaScript?自定義事件，我們將通過文章學習到有關(guān)創(chuàng)建自定義事件，偵聽自定義事件以及創(chuàng)建雙擊自定義事件所要了解的內(nèi)容,需要的朋友可以參考一下

前言:

相信大家肯定處理過很多的事件監(jiān)聽，比如點擊事件或者表單提交。事件監(jiān)聽對許多用例來說很有幫助，但是有時我們需要創(chuàng)建自己的自定義事件來處理復雜的交互。

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

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

const myEvent = new Event("myCustomEvent")

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

如下：

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

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

document.dispatchEvent(myEvent)

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

如果我們將上面講的組合在一起，我們就得到了一個基本的事件，這個事件在document元素觸發(fā)，相關(guān)的事件內(nè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"
}

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

isTrusted 屬性僅指該事件是由用戶交互觸發(fā)，還是由自定義 JavaScript 代碼觸發(fā)的。例如，當用戶單擊按鈕時，事件將 isTrusted 設(shè)置為 true，而我們自定義的事件會將其設(shè)置為 false，因為該事件是由 JavaScript 觸發(fā)的。

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

type 指事件的名稱。

事件定制

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

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

冒泡 bubbles

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

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

沒聽懂沒關(guān)系，后面學著學著就懂了

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

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

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

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

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 添加與你的事件同名的新事件，它還可以確保你的代碼不會中斷。

舉個例子，如果 JavaScript 添加了一個名為 doubleclick 事件，然后你已經(jīng)在時候 doubleclick 自定義事件了，那么會遇到問題，因為我們自定義代碼將觸發(fā)該事件，并且瀏覽器也會嘗試觸發(fā)它自己的副本。

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

雙擊事件

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

首先，我們需要創(chuàng)建一個正常的單擊事件監(jiān)聽器來確保是否有雙擊。

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 毫秒內(nèi)點擊了兩次，我們將通過 if 檢查并觸發(fā)我們的雙擊事件。為此，我們需要創(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
})

對于自定義的事件，我們將所有選項都設(shè)置為 true，因為默認情況下，單擊事件將所有這些屬性設(shè)置為 true，而且我們希望雙擊的行為類似于正常的單擊。也將 timeBetweenClicks 傳遞到 detail 選項中。

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

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

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

總結(jié)

自定義事件是 JavaScript 中處理手勢和雙擊事件的好方案，最重要的是，他們非常容易實現(xiàn)和使用。

到此這篇關(guān)于如何創(chuàng)建 JavaScript 自定義事件的文章就介紹到這了,更多相關(guān)JavaScript 自定義事件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論