怎么创建JavaScript自定义事件

　　怎么创建自定义事件
　　创建自定义事件听起来很困难，但是只需要下面简单的一行代码即可。constmyEventnewEvent（myCustomEvent）
　　你可以通过事件构造函数创建一个新的Event对象。在最基本的形式中，你只需要将一个字符串传递给构造函数，这个字符串就是你定义的事件名称。为了监听这个事件，你可以将该事件监听器添加到你要监听的元素上，如下：document。addEventListener（myCustomEvent，e｛console。log（e）｝）
　　最后一步，你需要做的事，触发创建并正在监听的事件。document。dispatchEvent（myEvent）
　　这就需呀dispatchEvent函数了。每个元素都有这个方法，你要做的就是将你创建的对象传递给它。
　　如果我们将上面讲的组合在一起，我们就得到了一个基本的事件，这个事件在我们的document元素触发，相关的事件内容会被打印出来。｛isTrusted：falsebubbles：falsecancelBubble：falsecancelable：falsecomposed：falsecurrentTarget：nulldefaultPrevented：falseeventPhase：0path：〔document，window〕returnValue：truesrcElement：documenttarget：documenttimeStamp：54。69999998807907type：myCustomEvent｝
　　图中是这个事件对象的最基本形式。它包含大量信息，最重要的部分我这里突出显示了。
　　isTrusted属性仅指该事件是由用户交互触发，还是由自定义JavaScript代码触发的。例如，当用户单击按钮时，事件将isTrusted设置为true，而我们自定义的事件会将其设置为false，因为该事件是由JavaScript触发的。
　　target指调用dispatchEvent函数的元素。
　　type指事件的名称。事件定制
　　你可能注意到了，上面的详情中有属性bubbles，cancelable和composed属性。这些实际上，在我们创建自定义事件时可以配置的选项。constmyEventnewEvent（myCustomEvent，｛bubbles：true，cancelable：true，composed：true｝）冒泡bubbles
　　当事件触发后，bubbles属性决定这个事件是否可以通过html进行冒泡。这个值默认为false，这意味着不可以进行冒泡行为，如果你想事件调用父HTML元素，你可以将其设置为true。constbubbleEventnewEvent（bubbleEvent，｛bubbles：true｝）constdefaultEventnewEvent（defaultEvent，｛bubbles：false｝）document。addEventListener（bubbleEvent，（）｛Thiswillgetcalledsincetheeventwillbubbleuptothedocumentfromthebuttonconsole。log（Bubble）｝）document。addEventListener（defaultEvent，（）｛Thisnevergetscalledsincetheeventcannotbubbleuptothedocumentfromthebuttonconsole。log（Default）｝）constbuttondocument。querySelector（button）button。dispatchEvent（bubbleEvent）button。dispatchEvent（defaultEvent）可取消cancelable
　　cancelable属性决定事件是否可以通过调用e。preventDefault（）取消。默认是false不可以。如果该属性是true值，你可以调用e。preventDefault（）方法。e。preventDefault（）会将事件defaultPrevented属性设置为true。constcancelableEventnewEvent（cancelableEvent，｛cancelable：true｝）constdefaultEventnewEvent（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。
　　没听懂没关系，后面学着学着就懂了给事件传递自定义数据
　　当你使用自定事件时，你希望自定义的数据传递给你的事件。使用newEvent构造函数是不可能的，这也就是为什么会有第二种创建事件的方法。constmyEventnewCustomEvent（myEvent，｛detail：｛hello：World｝｝）
　　CustomEvent构造函数取代Event构造函数。这与newEvent的工作方式相同，但你可以将detail属性以及bubbles，cancelable和composed属性一起传递给第二个参数。detail属性中你设置的内容都会传递给事件监听器。constmyEventnewCustomEvent（myEvent，｛detail：｛hello：World｝｝）document。addEventListener（myEvent，e｛console。log（e。detail）｛hello：World｝｝）document。dispatchEvent（myEvent）命名约定
　　在我们讲自定义双击事件的例子前，我想先讲讲命名约定。你可以为自定义事件命名任何你想要的名字，但是还是遵循命名约定，以更方便使用自己的代码。最普遍的命名约定事件，是为事件添加custom：前缀。
　　custom：以区分自定义事件和本身的事件，而且，如果JavaScript添加与你的事件同名的新事件，它还可以确保你的代码不会中断。
　　举个例子，如果JavaScript添加了一个名为doubleclick事件，然后你已经在时候doubleclick自定义事件了，那么你会遇到问题，因为你自定义代码将触发该事件，并且浏览器也会尝试触发它自己的副本。AlwaysusesomeformofnamingconventionconstmyEventnewEvent（custom：doubleClick）双击事件
　　在这个例子中，我们将创建一个双击的事件，只要你在短时间内单击一个元素，就会触发该事件。该事件还会将按钮单击之间的总时间作为自定义数据传递。
　　首先，我们需要创建一个正常的单击事件监听器来确保是否有双击。constbuttondocument。querySelector（button）constMAXDOUBLECLICKTIME500letlastClick0button。addEventListener（click，e｛consttimeBetweenClickse。timeStamplastClickif（timeBetweenClicksMAXDOUBLECLICKTIME）｛lastClicke。timeStampreturn｝TODO：Doubleclickhappened。Triggercustomevent。lastClick0｝）
　　上面的代码使用timeStamp属性来确保按钮上单击事件之间的时间。如果点击之间的时间超过500毫秒。
　　则会立刻返回并更新lastClick的值。一旦我们在500毫秒内点击了两次，我们将通过if检查并触发我们的双击事件。为此，我们需要创建我们的事件并调用它。constbuttondocument。querySelector（button）constMAXDOUBLECLICKTIME500letlastClick0button。addEventListener（click，e｛consttimeBetweenClickse。timeStamplastClickif（timeBetweenClicksMAXDOUBLECLICKTIME）｛lastClicke。timeStampreturn｝TODO：Doubleclickhappened。Triggercustomevent。lastClick0｝）
　　对于我们自定义的事件，我们将所有选项都设置为true，因为默认情况下，单击事件将所有这些属性设置为true，而且我们希望双击的行为类似于正常的单击。
　　我们也将timeBetweenClicks传递到detail选项中。
　　最后，我们在事件的目标上调度事件，这里是按钮元素。我们剩下要做的最后一件事就是监听事件。onstbuttondocument。querySelector（button）constMAXDOUBLECLICKTIME500letlastClick0button。addEventListener（click，e｛consttimeBetweenClickse。timeStamplastClickif（timeBetweenClicksMAXDOUBLECLICKTIME）｛lastClicke。timeStampreturn｝constdoubleClickEventnewCustomEvent（custom：doubleClick，｛bubbles：true，cancelable：true，composed：true，detail：｛timeBetweenClicks｝，｝）e。target。dispatchEvent（doubleClickEvent）lastClick0｝）
　　我们刚刚向按钮田间了一个简单的事件监听器，它将打印出DoubleClick之间的时间。总结
　　自定义事件是JavaScript中处理手势和双击事件的好方案，最重要的是，他们非常容易实现和使用。