更多课程 选择中心


Web培训

400-111-8989

Web培训

Web前端教程:怎么创建JavaScript自定义事件

  • 发布:Web前端培训
  • 来源:Web开发教程
  • 时间:2022-05-07 15:31

你肯定处理过很多的事件监听,比如点击事件或者表单提交。事件监听对许多用例来说很有帮助,但是有时我们需要创建自己的自定义事件来处理复杂的交互。在这片短文中,我将告诉你有关创建自定义事件,侦听自定义事件以及创建双击自定义事件所要了解的内容。

怎么创建自定义事件

创建自定义事件听起来很困难,但是只需要下面简单的一行代码即可。

constmyEvent=newEvent("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属性。这些实际上,在我们创建自定义事件时可以配置的选项。

constmyEvent=newEvent("myCustomEvent",{bubbles:true,cancelable:true,composed:true})

冒泡bubbles

当事件触发后,bubbles属性决定这个事件是否可以通过html进行冒泡。这个值默认为false,这意味着不可以进行冒泡行为,如果你想事件调用父HTML元素,你可以将其设置为true。

constbubbleEvent=newEvent("bubbleEvent",{bubbles:true})constdefaultEvent=newEvent("defaultEvent",{bubbles:false})document.addEventListener("bubbleEvent",()=>{//Thiswillgetcalledsincetheeventwillbubbleuptothedocumentfromthebuttonconsole.log("Bubble")})document.addEventListener("defaultEvent",()=>{//Thisnevergetscalledsincetheeventcannotbubbleuptothedocumentfromthebuttonconsole.log("Default")})constbutton=document.querySelector("button")button.dispatchEvent(bubbleEvent)button.dispatchEvent(defaultEvent)

可取消cancelable

cancelable属性决定事件是否可以通过调用e.preventDefault()取消。默认是false不可以。如果该属性是true值,你可以调用e.preventDefault()方法。e.preventDefault()会将事件defaultPrevented属性设置为true。

constcancelableEvent=newEvent("cancelableEvent",{cancelable:true})constdefaultEvent=newEvent("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构造函数是不可能的,这也就是为什么会有第二种创建事件的方法。

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自定义事件了,那么你会遇到问题,因为你自定义代码将触发该事件,并且浏览器也会尝试触发它自己的副本。

//AlwaysusesomeformofnamingconventionconstmyEvent=newEvent("custom:doubleClick")

双击事件

在这个例子中,我们将创建一个双击的事件,只要你在短时间内单击一个元素,就会触发该事件。该事件还会将按钮单击之间的总时间作为自定义数据传递。

首先,我们需要创建一个正常的单击事件监听器来确保是否有双击。

constbutton=document.querySelector("button")constMAX_DOUBLE_CLICK_TIME=500letlastClick=0button.addEventListener("click",e=>{consttimeBetweenClicks=e.timeStamp-lastClickif(timeBetweenClicks>MAX_DOUBLE_CLICK_TIME){lastClick=e.timeStampreturn}//TODO:Doubleclickhappened.Triggercustomevent.lastClick=0})

上面的代码使用timeStamp属性来确保按钮上单击事件之间的时间。如果点击之间的时间超过500毫秒。

则会立刻返回并更新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){lastClick=e.timeStampreturn}//TODO:Doubleclickhappened.Triggercustomevent.lastClick=0})

对于我们自定义的事件,我们将所有选项都设置为true,因为默认情况下,单击事件将所有这些属性设置为true,而且我们希望双击的行为类似于正常的单击。

我们也将timeBetweenClicks传递到detail选项中。

最后,我们在事件的目标上调度事件,这里是按钮元素。我们剩下要做的最后一件事就是监听事件。

onstbutton=document.querySelector("button")constMAX_DOUBLE_CLICK_TIME=500letlastClick=0button.addEventListener("click",e=>{consttimeBetweenClicks=e.timeStamp-lastClickif(timeBetweenClicks>MAX_DOUBLE_CLICK_TIME){lastClick=e.timeStampreturn}constdoubleClickEvent=newCustomEvent("custom:doubleClick",{bubbles:true,cancelable:true,composed:true,detail:{timeBetweenClicks},})e.target.dispatchEvent(doubleClickEvent)lastClick=0})

我们刚刚向按钮田间了一个简单的事件监听器,它将打印出DoubleClick之间的时间。

总结

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

预约申请免费试听课

填写下面表单即可预约申请免费试听!怕钱不够?可就业挣钱后再付学费! 怕学不会?助教全程陪读,随时解惑!担心就业?一地学习,可全国推荐就业!

上一篇:Web前端和后端有什么区别?
下一篇:Web教程:7个CSS核心概念

【前端小技巧】Web前端隐藏技能

零基础学习Web前端开发需要掌握的技术?

学习Web前端有什么好方法吗?(值得收藏)

2022年Web前端学习路线图

  • 扫码领取资料

    回复关键字:视频资料

    免费领取 达内课程视频学习资料

  • 视频学习QQ群

    添加QQ群:1143617948

    免费领取达内课程视频学习资料

Copyright © 2021 Tedu.cn All Rights Reserved 京ICP备08000853号-56 京公网安备 11010802029508号 达内时代科技集团有限公司 版权所有

选择城市和中心
黑龙江省

吉林省

河北省

贵州省

云南省

广西省

海南省