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 相关文章推荐
使用prototype.js进行异步操作
Feb 07 Javascript
关于jquery.validate1.9.0前台验证的使用介绍
Apr 26 Javascript
jQuery实现的一个tab切换效果内部还嵌有切换
Aug 10 Javascript
javascript中的五种基本数据类型
Aug 26 Javascript
jQuery设置单选按钮radio选中/不可用的实例代码
Jun 24 Javascript
原生JavaScript来实现对dom元素class的操作方法(推荐)
Aug 16 Javascript
vue-router 权限控制的示例代码
Sep 21 Javascript
Angular resolve基础用法详解
Oct 03 Javascript
vue中v-show和v-if的异同及v-show用法
Jun 06 Javascript
layui数据表格实现重载数据表格功能(搜索功能)
Jul 27 Javascript
微信小程序聊天功能的示例代码
Jan 13 Javascript
利用JS判断元素是否为数组的方法示例
Jan 08 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
这部好评如潮的动漫 知名梗频出 但是画风劝退很多人
2020/03/08 日漫
图形数字验证代码
2006/10/09 PHP
php生成EXCEL的东东
2006/10/09 PHP
php创建类并调用的实例方法
2019/09/25 PHP
PHP const定义常量及global定义全局常量实例解析
2020/05/28 PHP
用jquery ajax获取网站Alexa排名的代码
2009/12/12 Javascript
在JavaScript中操作时间之getMonth()方法的使用
2015/06/10 Javascript
nodejs实现获取当前url地址及url各种参数值
2015/06/25 NodeJs
JavaScript保存并运算页面中数字类型变量的写法
2015/07/06 Javascript
Javascript中级语法快速入手
2016/07/30 Javascript
js实现下拉菜单效果
2017/03/01 Javascript
jQuery动态追加页面数据以及事件委托详解
2017/05/06 jQuery
layui table 参数设置方法
2018/08/14 Javascript
JavaScript常见鼠标事件与用法分析
2019/01/03 Javascript
教你搭建按需加载的Vue组件库(小结)
2019/07/29 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
2019/11/20 Javascript
[05:10]2014DOTA2国际邀请赛 通往胜利之匙赛场探秘之旅
2014/07/18 DOTA
使用python批量化音乐文件格式转换的实例
2019/01/09 Python
Django 多环境配置详解
2019/05/14 Python
python实现简单聊天室功能 可以私聊
2019/07/12 Python
利用Python检测URL状态
2019/07/31 Python
python取均匀不重复的随机数方式
2019/11/27 Python
python+Django+pycharm+mysql 搭建首个web项目详解
2019/11/29 Python
python获取百度热榜链接的实例方法
2020/08/25 Python
python 贪心算法的实现
2020/09/18 Python
python 实现简单的计算器(gui界面)
2020/11/11 Python
女士时装鞋:Chinese Laundry
2018/08/29 全球购物
全球性的奢侈品梦工厂:Forzieri(福喜利)
2019/02/20 全球购物
瑞典多品牌连锁店:Johnells
2021/01/13 全球购物
毕业生简单求职信
2013/11/19 职场文书
社区消防工作实施方案
2014/03/21 职场文书
社区科普工作方案
2014/06/03 职场文书
综合素质评价自我评价
2015/03/06 职场文书
2015年度优秀员工自荐书
2015/03/06 职场文书
iPhone13再次曝光
2021/04/15 数码科技
Python matplotlib可视化之绘制韦恩图
2022/02/24 Python