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

来源:脚本之家  责任编辑:小易  

/自定义事件对象用于自定义事件绑定、触发、删除var Event={eventMap:{},addEventListener:function(eventName,handler,target,args){var T=this;if!T.eventMap[eventName]){T.eventMap[eventName]=[];}target=target|T;args=args|[];T.eventMap[eventName].push({handler:handler,target:target,args:args});return T;},removeEventListener:function(eventName,handler){var T=this,i,len,item;if(handler){for(i=0;i;i+){item=T.eventMap[eventName][i];if(item.handler=handler){item=null;}}} else {T.eventMap[eventName]=[];}return T;},dispatch:function(eventName,e){var T=this,i,len,item,map=T.eventMap[eventName];if(map){len=map.length;}e=e|{};for(i=0;i;i+){item=map[i];if(item){item.args.unshift(e);item.handler.apply(item.target,item.args);}}}}调用事件绑定Event.addEventListener(name,function(e,name,callback){});触发事件Event.dispatch(name,name);www.zgxue.com防采集请勿采集本网。

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

1. 事件的创建

_events的type属性,或者_events的type方法的返回值。在JavaScript中,每个对象可以看作是多个属性(方法)的集合,引用一个属性(方法) 很简单,即: 对象名.属性(方法)名 除此之外,还可以用

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

触发器也可用于强制引用完整性,以便在多个表中添加、更新或删除行时,保留在这些表之间所定义的关系。然而,强制引用完整性的最好方法是在相关表中定义主键和外键约束。如果使用数据库关系图,则可以在表

var myEvent = new Event('event_name');

可以使自定义事件(使用 bind()函数来附加),或者任何标准事件;[param1,param2,.]可选。传递到事件处理程序的额外参数。额外的参数对自定义事件特别有用。三、实例: 触发 select元素的change事件:$(

但是为了能够传递数据,就需要使用 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):

// 首先需要提前定义好事件,并且注册相关的EventListenervar 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.jb51.net/table/javascript_event

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

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

在javascript中实现自定义事件的原理是创建一个管理事件的对象.如下代码是事件的定义:function EventTarget(){this.handlers={};存储事件处理程序,由n个键值对组成,键表示事件名,值是一个由事件处理程序组成的数组}EventTarget.prototype={constructor:EventTarget,添加事件addHandler:function(type,handler){if(typeof this.handlers[type]="undefined"){this.handlers[type]=[];}this.handlers[type].push(handler);},触发事件fire:function(event){if!event.target){event.target=this;}if(this.handlers[event.type]instanceof Array){var handlers=this.handlers[event.type];for(var i=0,len=handlers.length;i;i+){将event传递给事件处理程序,event.target代表对象本身,event.type代表事件名,你可以根据情况为添加event属性handlers[i](event);}}},移除事件removeHandler:function(type,handler){if(this.handlers[type]instanceof Array){var handlers=this.handlers[type];for(var i=0,len=handlers.length;i;i+){if(handlers[i]=handler){break;}}handlers.splice(i,1);}}};首先是定义了一个名为EventTarget的构造函数,为其定义的属性handlers用于存储事件处理程序,然后有三个操作方法添加到EventTarget的原型中,分别是addHandler fire remocveHander.addHander是向handlers中添加事件处理程序fire是触发handlers中的事件处理程序removeHandler是向handlers中移除事件处理程序注:事件处理程序通俗的讲就是事件被触发时需要执行的方法内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • js自定义事件及事件交互原理概述(一)
  • 详解javascript实现自定义事件
  • javascript自定义事件介绍
  • javascript 自定义事件初探
  • js自定义事件代码说明
  • 详解javascript中的自定义事件编写
  • javascript自定义事件详解
  • javascript自定义事件功能与用法实例分析
  • javascript中的模拟事件和自定义事件实例分析
  • 微信小程序之几种常见的弹框提示信息实现详解
  • js 判断一个数字是不是2的n次方幂的实例
  • js 下拉菜单点击旁边收起实现(踩坑记)
  • fundebug支持监控微信小程序http请求错误的方法
  • js判断页面是否出现滚动条的方法
  • ff和ie之间7个javascript的差异
  • js+css实现模仿浏览器网页字符查找功能的方法
  • webpack-dev-server自动更新页面方法
  • javascript实现提交模式窗口后刷新父窗口数据的方法
  • js判断元素是否隐藏的方法
  • 如何在JavaScript中使用自定义事件
  • 如何在JavaScript中使用自定义事件
  • C#自定义事件用在什么地方
  • java 自定义事件的触发及监听
  • js 里自定义事件
  • 什么是触发器?
  • JQuery中select change事件该怎么触发?我想通过Ajax把所选择选项的值发送到后台处理一些逻辑。。。
  • C#自定义事件问题
  • javascript中的对象,..自定义对象..function
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全基础知识javascript类库表单特效广告代码网页特效黑客性质javascript技巧domnode.jsjs其它首页javascriptjavascript技巧javascript事件相关操作与技巧大全javascript常用函数技巧汇总javascript面向对象入门教程javascript错误与调试技巧总结javascript数据结构与算法技巧总结javascript数学运算用法总结js自定义事件及事件交互原理概述(一)详解javascript实现自定义事件javascript自定义事件介绍javascript 自定义事件初探js自定义事件代码说明详解javascript中的自定义事件编写javascript自定义事件详解javascript自定义事件功能与用法实例分析javascript中的模拟事件和自定义事件实例分析微信小程序之几种常见的弹框提示信息实现详解js 判断一个数字是不是2的n次方幂的实例js 下拉菜单点击旁边收起实现(踩坑记)fundebug支持监控微信小程序http请求错误的方法js判断页面是否出现滚动条的方法ff和ie之间7个javascript的差异js+css实现模仿浏览器网页字符查找功能的方法webpack-dev-server自动更新页面方法javascript实现提交模式窗口后刷新父窗口数据的方法js判断元素是否隐藏的方法js刷新页面方法大全js中settimeout()的用法详解js截取字符串常用方法详细整理js页面跳转常用的几种方式js打开新窗口的2种方式js数组与字符串的相互转换方法js设置cookie、读取cookie、删除js删除数组里的某个元素方法js 将json字符串转换为json对象的javascript深入理解js闭包微信小程序学习笔记之跳转页面、传递参数常见效果实现之返回顶部(结合淡入、淡出、一个非常全面的javascript url解析函数和原生javascript自定义input[type=radio]效javascript车架号识别/验证函数代码 汽车js常用函数2008-8-16整理iframe跨域高度自适应实现代码javascript 实现广告后加载 可加载百度谷微信小程序实现slideup、slidedown滑动效让ie支持rgba的背景色的代码
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved