怎么建立 JavaScript 自定义事件

你确定处理过不少的事件监听，好比点击事件或者表单提交。事件监听对许多用例来讲颇有帮助，可是有时咱们须要建立本身的自定义事件来处理复杂的交互。在这片短文中，我将告诉你有关建立自定义事件，侦听自定义事件以及建立双击自定义事件所要了解的内容。javascript

怎么建立自定义事件

建立自定义事件听起来很困难，可是只须要下面简单的一行代码便可。html

const myEvent = new Event("myCustomEvent")
复制代码

你能够经过事件构造函数建立一个新的 Event 对象。在最基本的形式中，你只须要将一个字符串传递给构造函数，这个字符串就是你定义的事件名称。为了监听这个事件，你能够将该事件监听器添加到你要监听的元素上，以下：java

document.addEventListener("myCustomEvent", e => {
  console.log(e)
})
复制代码

最后一步，你须要作的事，触发建立并正在监听的事件。git

document.dispatchEvent(myEvent)
复制代码

这就需呀 dispatchEvent 函数了。每一个元素都有这个方法，你要作的就是将你建立的对象传递给它。github

若是咱们将上面讲的组合在一块儿，咱们就获得了一个基本的事件，这个事件在咱们的 document 元素触发，相关的事件内容会被打印出来。浏览器

图中是这个事件对象的最基本形式。它包含大量信息，最重要的部分我这里突出显示了。app

isTrusted 属性仅指该事件是由用户交互触发，仍是由自定义 JavaScript 代码触发的。例如，当用户单击按钮时，事件将 isTrusted 设置为 true，而咱们自定义的事件会将其设置为 false，由于该事件是由 JavaScript 触发的。函数

target 指调用 dispatchEvent 函数的元素。学习

type 指事件的名称。url

事件定制

你可能注意到了，上面的详情中有属性 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 检查并触发咱们的双击事件。为此，咱们须要建立咱们的事件并调用它。

对于咱们自定义的事件，咱们将全部选项都设置为 true，由于默认状况下，单击事件将全部这些属性设置为 true，并且咱们但愿双击的行为相似于正常的单击。咱们也将 timeBetweenClicks 传递到 detail 选项中。最后，咱们在事件的目标上调度事件，这里是按钮元素。咱们剩下要作的最后一件事就是监听事件。

咱们刚刚向按钮田间了一个简单的事件监听器，它将打印出 Double Click 之间的时间。

总结

自定义事件是 JavaScript 中处理手势和双击事件的好方案，最重要的是，他们很是容易实现和使用。

最后