原生JS自定义事件的使用与触发

5833次阅读 345人点赞 作者: WuBin 发布时间: 2021-02-22 09:50:26
扫码到手机查看

事件的创建

JS中,最简单的创建事件方法,是使用Event构造器:

var myEvent = new Event('event_name');

但是为了能够传递数据,就需要使用 CustomEvent 构造器:

var myEvent = new CustomEvent('event_name', {
    detail:{
        // 将需要传递的数据写在detail中,以便在EventListener中获取
        // 数据将会在event.detail中得到    title: 'event done'
    },
});

至此,window对象上就有了对‘event_name’这个事件的监听器,当window上触发这个事件的时候,相关的callback就会执行。

事件的监听

JS的EventListener是根据事件的名称来进行监听的,比如我们在上文中已经创建了一个名称为‘event_name’的事件,那么当某个元素需要监听它的时候,就需要创建相应的监听器:

//假设listener注册在window对象上
window.addEventListener('event_name', function(event){
    // 如果是CustomEvent,传入的数据在event.detail中
    console.log('得到数据为:', event.detail);
    // ...后续相关操作
});

事件的触发

自定义的事件由于不是JS内置的事件,所以我们需要在JS代码中去显式地触发它。方法是使用dispatchEvent去触发(IE8低版本兼容,使用fireEvent):

// 首先需要提前定义好事件,并且注册相关的EventListener
var myEvent = new CustomEvent('event_name', { 
    detail: { title: 'This is title!'},
});
// 随后在对应的元素上触发该事件
if(window.dispatchEvent) {  
    window.dispatchEvent(myEvent);
} else {
    window.fireEvent(myEvent);
}
// 在触发的元素上监听事件
window.addEventListener('event_name', function(event){
    console.log('得到标题为:', event.detail.title);
});
// 根据listener中的callback函数定义,应当会在console中输出 "得到标题为: This is title!"

需要特别注意的是,当一个事件触发的时候,如果相应的element及其上级元素没有对应的EventListener,就不会有任何回调操作。对于子元素的监听,可以对父元素添加事件托管,让事件在事件冒泡阶段被监听器捕获并执行。这时候,使用event.target就可以获取到具体触发事件的元素。

JQuery中的自定义事件

比如在点击某个按钮时候,触发自定义事件

$('#btn').click(function(){
    // 触发自定义事件,自定义事件定义在window上
     $(window).trigger('resize.hotsearch');
});
// 监听自定义事件
$(window).on('resize.hotsearch', function() {
    // resize.hotsearch的自定义事件内容
});

也可以在$(window)中进行监听

关于JQ的trigger

可以触发绑定在元素上的事件

$( "#foo" ).on( "click", function() {
  alert( $( this ).text() );
});
$( "#foo" ).trigger( "click" );
点赞 支持一下 觉得不错?客官您就稍微鼓励一下吧!
关键词:自定义事件eventcustomEvent
推荐阅读
  • uniapp实现被浏览器唤起的功能

    当用户打开h5链接时候,点击打开app若用户在已经安装过app的情况下直接打开app,若未安装过跳到应用市场下载安装这个功能在实现上主要分为两种场景,从普通浏览器唤醒以及从微信唤醒。

    8186次阅读 521人点赞 发布时间: 2022-12-14 16:34:53 立即查看
  • Vue

    盘点Vue2和Vue3的10种组件通信方式

    Vue中组件通信方式有很多,其中Vue2和Vue3实现起来也会有很多差异;本文将通过选项式API组合式API以及setup三种不同实现方式全面介绍Vue2和Vue3的组件通信方式。

    3282次阅读 241人点赞 发布时间: 2022-08-19 09:40:16 立即查看
  • JS

    几个高级前端常用的API

    推荐4个前端开发中常用的高端API,分别是MutationObserver、IntersectionObserver、getComputedstyle、getBoundingClientRect、requ...

    13228次阅读 854人点赞 发布时间: 2021-11-11 09:39:54 立即查看
  • PHP

    【正则】一些常用的正则表达式总结

    在日常开发中,正则表达式是非常有用的,正则表达式在每个语言中都是可以使用的,他就跟JSON一样,是通用的。了解一些常用的正则表达式,能大大提高你的工作效率。

    12104次阅读 385人点赞 发布时间: 2021-10-09 15:58:58 立即查看
  • 【中文】免费可商用字体下载与考证

    65款免费、可商用、无任何限制中文字体打包下载,这些字体都是经过长期验证,经得住市场考验的,让您规避被无良厂商起诉的风险。

    10347次阅读 829人点赞 发布时间: 2021-07-05 15:28:45 立即查看
  • Vue

    Vue3开发一个v-loading的自定义指令

    在vue3中实现一个自定义的指令,有助于我们简化开发,简化复用,通过一个指令的调用即可实现一些可高度复用的交互。

    14248次阅读 1132人点赞 发布时间: 2021-07-02 15:58:35 立即查看
  • JS

    关于手机上滚动穿透问题的解决

    当页面出现浮层的时候,滑动浮层的内容,正常情况下预期应该是浮层下边的内容不会滚动;然而事实并非如此。在PC上使用css即可解决,但是在手机端,情况就变的比较复杂,就需要禁止触摸事件才可以。

    14180次阅读 1156人点赞 发布时间: 2021-05-31 09:25:50 立即查看
  • Vue

    Vue+html2canvas截图空白的问题

    在使用vue做信网单页专题时,有海报生成的功能,这里推荐2个插件:一个是html2canvas,构造好DOM然后转canvas进行截图;另外使用vue-canvas-poster(这个截止到2021年3月...

    27073次阅读 2131人点赞 发布时间: 2021-03-02 09:04:51 立即查看
  • Vue

    vue-router4过度动画无效解决方案

    在初次使用vue3+vue-router4时候,先后遇到了过度动画transition进入和退出分别无效的情况,搜遍百度没没找到合适解决方法,包括vue-route4有一些API都进行了变化,以前的一些操...

    23237次阅读 1791人点赞 发布时间: 2021-02-23 13:37:20 立即查看
交流 收藏 目录