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 相关文章推荐
30个精美的jQuery幻灯片效果插件和教程
Aug 23 Javascript
javascript Array.prototype.slice的使用示例
Nov 14 Javascript
用html+css+js实现的一个简单的图片切换特效
May 28 Javascript
jQuery的animate函数学习记录
Aug 08 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
Apr 06 Javascript
详解JavaScript编程中正则表达式的使用
Oct 25 Javascript
js判断鼠标位置是否在某个div中的方法
Feb 26 Javascript
图解prototype、proto和constructor的三角关系
Jul 31 Javascript
axios学习教程全攻略
Mar 26 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
May 02 Javascript
详解express与koa中间件模式对比
Aug 07 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
Sep 27 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
《忧国的莫里亚蒂》先导宣传图与STAFF公开
2020/03/04 日漫
php MessagePack介绍
2013/10/06 PHP
Windows下编译PHP5.4和xdebug全记录
2015/04/03 PHP
Phpstorm+Xdebug断点调试PHP的方法
2018/05/14 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
JavaScript的Cookies
2008/01/16 Javascript
JavaScript中的getTime()方法使用详解
2015/06/10 Javascript
js微信分享API
2020/10/11 Javascript
JavaScript 深层克隆对象详解及实例
2016/11/03 Javascript
老生常谈原生JS执行环境与作用域
2016/11/22 Javascript
JS检测数组类型的方法小结
2017/03/14 Javascript
js移动端事件基础及常用事件库详解
2017/08/15 Javascript
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
2018/08/13 Javascript
详解一次Vue低版本安卓白屏问题的解决过程
2019/05/30 Javascript
javascript使用substring实现的展开与收缩文字功能示例
2019/06/17 Javascript
nodejs的安装使用与npm的介绍
2019/09/11 NodeJs
如何基于原生javaScript生成带图片的二维码
2019/11/21 Javascript
通过实例解析json与jsonp原理及使用方法
2020/09/27 Javascript
在Mac OS上搭建Python的开发环境
2015/12/24 Python
python中requests库session对象的妙用详解
2017/10/30 Python
python实现支付宝当面付(扫码支付)功能
2018/05/30 Python
使用python进行文本预处理和提取特征的实例
2018/06/05 Python
Python面向对象进阶学习
2019/05/21 Python
python 处理微信对账单数据的实例代码
2019/07/19 Python
Django配置文件代码说明
2019/12/04 Python
TensorFlow2.1.0安装过程中setuptools、wrapt等相关错误指南
2020/04/08 Python
python实现数字炸弹游戏程序
2020/07/17 Python
班主任对学生的评语
2014/04/26 职场文书
服务承诺书格式
2014/05/21 职场文书
公司贷款承诺书
2014/05/30 职场文书
年度评优评先方案
2014/06/03 职场文书
井冈山红色之旅感想
2014/10/07 职场文书
房屋买卖协议样本
2014/11/16 职场文书
现实表现材料范文
2014/12/23 职场文书
周一问候语大全
2015/11/10 职场文书
创业计划书之蛋糕店
2019/08/29 职场文书