你一定处理过很多事件监听，例如点击事件或表单提交。事件监听对许多用例都有帮助，但有时我们需要创建自己的自定义事件来处理复杂的交互。如何创建自定义事件创建自定义事件听起来很难，但只需要下面一行代码。constmyEvent=newEvent("myCustomEvent")您可以通过事件构造函数创建一个新的Event对象。在最基本的形式中，您只需将一个字符串传递给构造函数，这是您定义的事件的名称。为了监听这个事件，你可以在你想监听的元素上添加事件监听器，如下：document.addEventListener("myCustomEvent",e=>{console.log(e)})最后一步，你需要做事件，触发创建的事件并被监听。document.dispatchEvent(myEvent)这需要dispatchEvent函数。每个元素都有这个方法，你所要做的就是将你创建的对象传递给它。如果我们结合以上内容，我们会得到一个基本事件，该事件会在我们的文档元素上触发，并且会打印相关的事件内容。{isTrusted:falsebubbles:falsecancelBubble:falsecancelable:falsecomposed:falsecurrentTarget:nulldefaultPrevented:falseeventPhase:0path:[document,window]returnValue:truesrcElement:documenttarget:documenttimeCtomtype:509788099"}元素："图中显示了此事件对象的最基本形式。它包含很多信息，我在这里强调了其中最重要的部分。isTrusted属性只是指事件是由用户交互触发的，还是由自定义JavaScript代码触发的。例如，当用户单击按钮时，事件将isTrusted设置为true，而我们的自定义事件将其设置为false，因为该事件是由JavaScript触发的。target是指调用dispatchEvent函数的元素。类型是指事件的名称。事件自定义你可能已经注意到上面的细节中有属性bubbles、cancelable和composed属性。这些实际上是我们创建自定义事件时可以配置的选项。constmyEvent=newEvent("myCustomEvent",{bubbles:true,cancelable:true,composed:true})冒泡bubbles事件触发时，bubbles属性决定事件是否可以通过html冒泡。这个值默认为false，表示没有冒泡行为，如果你想让事件调用父HTML元素，可以设置为true。constbubbleEvent=newEvent("bubbleEvent",{bubble:true})constdefaultEvent=newEvent("defaultEvent",{bubbles:false})document.addEventListener("bubbleEvent",()=>{//这将得到调用，因为事件将从按钮冒泡到文档console.log("Bubble")})document.addEventListener("defaultEvent",()=>{//由于事件不能冒泡到documentfromthebuttonconsole.log("Default")})constbutton=document.querySelector("button")button.dispatchEvent(bubbleEvent)button.dispatchEvent(defaultEvent)cancelablecancelable属性决定事件是否可以通过调用e.preventDefault()取消。默认为false且不允许。如果此属性为真，则可以调用e.preventDefault()方法。e.preventDefault()会将事件的defaultPrevented属性设置为true。常量取消事件=新事件（“取消事件”，{取消：真}）.log(e.defaultPrevented)//True})document.addEventListener("defaultEvent",e=>{e.preventDefault()console.log(e.defaultPrevented)//False})document.dispatchEvent(cancelableEvent)文档。dispatchEvent(defaultEvent)组合的组合属性决定事件是否可以通过shadowdom向上传播。默认值为假。此属性仅在您使用自定义HTML元素和影子DOM时适用，它的作用是允许事件传播到影子DOM之外。如果您希望在影子DOM中触发的事件在影子DOM之外被捕获，请将此设置为true。看不懂没关系，后面会学习给事件传递自定义数据。当您使用自定义事件时，您希望将自定义数据传递给您的事件。这对于新的Event构造函数是不可能的，这就是为什么有第二种创建事件的方法。constmyEvent=newCustomEvent("myEvent",{detail:{hello:"World"}})CustomEvent构造函数替换了Event构造函数。这与newEvent的工作方式相同，但您可以将detail属性作为第二个参数与bubbles、cancelable和composed属性一起传递。无论您在detail属性中设置什么，都将传递给事件侦听器。constmyEvent=newCustomEvent("myEvent",{detail:{hello:"World"}})document.addEventListener("myEvent",e=>{console.log(e.detail)//{hello:"World"}})document.dispatchEvent(myEvent)命名约定在讲自定义双击事件的例子之前，我想先说说命名约定。您可以随意命名自定义事件，但请遵循命名约定，以便更轻松地使用您自己的代码。最常见的事件命名约定是在事件前加上custom:前缀。custom：区分自定义事件和它们自己的事件，并确保如果JavaScript添加与您的事件同名的新事件，您的代码不会中断。例如，如果JavaScript添加一个名为doubleclick的事件，而您已经有一个自定义的doubleclick事件，您就会遇到问题，因为您的自定义代码将触发该事件，而浏览器也会尝试触发它。自己的副本。//总是使用某种形式的命名约定constmyEvent=newEvent("custom:doubleClick")Doubleclickevent在这个例子中，我们将创建一个双击事件，当你在短时间内点击一个元素时，它就会被触发.该事件还将按钮点击之间的总时间作为自定义数据传递。首先，我们需要创建一个普通的点击事件监听器来确保有一个双击。constbutton=document.querySelector("button")constMAX_DOUBLE_CLICK_TIME=500letlastClick=0button.addEventListener("click",e=>{consttimeBetweenClicks=e.timeStamp-lastClickif(timeBetweenClicks>MAX_DOUBLE_CLICK_TIME=elastStntime){}//TODO:Doubleclickhappened.Triggercustomevent.lastClick=0})上面的代码使用timeStamp属性来确保按钮上的点击事件之间的时间间隔。如果点击之间的时间超过500ms。它将立即返回并更新lastClick的值。一旦我们在500毫秒内点击了两次，我们将通过if检查并触发我们的双击事件。为此，我们需要创建事件并调用它。constbutton=document.querySelector("button")constMAX_DOUBLE_CLICK_TIME=500letlastClick=0button.addEventListener("click",e=>{consttimeBetweenClicks=e.timeStamp-lastClickif(timeBetweenClicks>MAX_DOUBLE_CLICK_TIME=elastStntime){}//TODO：双击发生。触发自定义事件。lastClick=0})对于我们的自定义事件，我们将所有选项设置为true，因为默认情况下点击事件将所有这些属性设置为true，我们希望双击的行为像正常的单击。我们还将timeBetweenClicks传递给详细信息选项。最后，我们在事件目标上分派事件，在本例中是按钮元素。我们剩下要做的最后一件事就是监听事件。onstbutton=document.querySelector("button")constMAX_DOUBLE_CLICK_TIME=500letlastClick=0button.addEventListener("click",e=>{consttimeBetweenClicks=e.timeStamp-lastClickif(timeBetweenClicks>MAX_DOUBLE_CLICK_TIME=lastClick}constdoubleClickEvent=newCustomEvent("custom:doubleClick",{bubbles:true,cancelable:true,composed:true,detail:{timeBetweenClicks},})e.target.dispatchEvent(doubleClickEvent)lastClick=0})我们刚刚发送的按钮字段有一个简单的事件侦听器，将打印出双击之间的时间总结自定义事件是在JavaScript中处理手势和双击事件的好方法，最重要的是，它们非常易于实现和使用。
