JS中自定义事件的使用与触发操作实例分析


Posted in Javascript onNovember 01, 2019

本文实例讲述了JS中自定义事件的使用与触发操作。分享给大家供大家参考,具体如下:

1. 事件的创建

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

var myEvent = new Event('event_name');

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

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

2. 事件的监听

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

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

 // ...后续相关操作
});

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

3. 事件的触发

对于一些内置(built-in)的事件,通常都是有一些操作去做触发,比如鼠标单击对应MouseEvent的click事件,利用鼠标(ctrl+滚轮上下)去放大缩小页面对应WheelEvent的resize事件。
然而,自定义的事件由于不是JS内置的事件,所以我们需要在JS代码中去显式地触发它。方法是使用 dispatchEvent 去触发(IE8低版本兼容,使用fireEvent):

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

需要特别注意的是,当一个事件触发的时候,如果相应的element及其上级元素没有对应的EventListener,就不会有任何回调操作。

对于子元素的监听,可以对父元素添加事件托管,让事件在事件冒泡阶段被监听器捕获并执行。这时候,使用event.target就可以获取到具体触发事件的元素。

PS:这里再为大家附上javascript系统自带事件参考表供大家参考查询:

javascript事件与功能说明大全:
http://tools.3water.com/table/javascript_event

更多关于JavaScript相关内容可查看本站专题:《JavaScript事件相关操作与技巧大全》、《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
Extjs Gird 支持中文拼音排序实现代码
Apr 15 Javascript
jquery之超简单的div显示和隐藏特效demo(分享)
Jul 09 Javascript
javascript抖动元素的小例子
Oct 28 Javascript
自己动手实现jQuery Callbacks完整功能代码详解
Nov 25 Javascript
浅析JavaScript中的隐式类型转换
Dec 05 Javascript
JavaScript中的异常捕捉介绍
Dec 31 Javascript
js的toUpperCase方法用法实例
Jan 27 Javascript
JavaScript中pop()方法的使用教程
Jun 09 Javascript
跟我学习JScript的Bug与内存管理
Nov 18 Javascript
jQuery实现三级联动效果
Mar 02 Javascript
VUE利用vuex模拟实现新闻点赞功能实例
Jun 28 Javascript
vuex actions异步修改状态的实例详解
Nov 06 Javascript
vue设置动态请求地址的例子
Nov 01 #Javascript
在vue中利用全局路由钩子给url统一添加公共参数的例子
Nov 01 #Javascript
js实现旋转的星空效果
Nov 01 #Javascript
浅谈小程序globalData的那些事儿
Nov 01 #Javascript
小程序怎样让wx.navigateBack更好用的方法实现
Nov 01 #Javascript
vue实现配置全局访问路径头(axios)
Nov 01 #Javascript
vue.js路由mode配置之去掉url上默认的#方法
Nov 01 #Javascript
You might like
PHP MVC框架skymvc支持多文件上传
2016/05/26 PHP
jquery ajax 同步异步的执行示例代码
2010/06/23 Javascript
Asp.net下使用Jquery Ajax传送和接收DataTable的代码
2010/09/12 Javascript
腾讯的ip接口 方便获取当前用户的ip地理位置
2010/11/25 Javascript
解决jquery的datepicker的本地化以及Today问题
2012/05/23 Javascript
Three.js源码阅读笔记(基础的核心Core对象)
2012/12/27 Javascript
JavaScript操纵窗口的方法小结
2013/06/28 Javascript
Js点击弹出下拉菜单效果实例
2013/08/12 Javascript
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
2015/11/04 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
2016/08/31 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
2017/03/30 Javascript
基于JavaScript定位当前的地理位置
2017/04/11 Javascript
详解React开发中使用require.ensure()按需加载ES6组件
2017/05/12 Javascript
Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
2017/05/28 Javascript
详解Angular4中路由Router类的跳转navigate
2017/06/09 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
2018/12/24 Javascript
详解vuex中action何时完成以及如何正确调用dispatch的思考
2019/01/21 Javascript
JS回调函数 callback的理解与使用案例分析
2019/09/09 Javascript
Python 深入理解yield
2008/09/06 Python
python 多线程重启方法
2019/02/18 Python
PyQt5 QTableView设置某一列不可编辑的方法
2019/06/25 Python
Python三元运算与lambda表达式实例解析
2019/11/30 Python
使用Python爬虫库requests发送请求、传递URL参数、定制headers
2020/01/25 Python
Flask和pyecharts实现动态数据可视化
2020/02/26 Python
俄罗斯眼镜网: optikaworld
2016/07/31 全球购物
美国最好的保健品打折网店:Swanson
2017/08/04 全球购物
倩碧澳大利亚官网:Clinique澳大利亚
2019/07/22 全球购物
父亲追悼会答谢词
2014/01/17 职场文书
上课看小说检讨书
2014/02/22 职场文书
机票销售员态度不好检讨书
2014/09/27 职场文书
个人党性分析总结
2015/03/05 职场文书
2015年世界无烟日演讲稿
2015/03/18 职场文书
车辆管理制度范本
2015/08/05 职场文书
SpringBoot集成Redis的思路详解
2021/10/16 Redis
详细聊聊浏览器是如何看闭包的
2021/11/11 Javascript
Python获取指定日期是"星期几"的6种方法
2022/03/13 Python