JavaScript 自定义事件之我见


Posted in Javascript onSeptember 25, 2017

事件

技术一般水平有限,有什么错的地方,望大家指正。

事件就是用户和浏览器交互的一种途径。假如一个用户注册的功能,我们在填写完基本信息之后,点击提交按钮就可以实现注册功能,要想完成这个功能所需要的就是点击事件。我们预先定义好操作行为,在用户点击提交按钮时就执行我们预先定好的行为,在本例中我们的代码逻辑一般就是收集用户填写信息,验证信息合法性,利用AJAX与服务器交互。

这个过程就好像我们平时封装函数然后调用函数一样,事件其实也就类似函数定义函数调用这样的一个过程,只不过事件函数的调用是由用户的一些操作来告知浏览器,让浏览器在去调用函数的。

首先浏览器已经给我们提供了一列的事件,包括click,keydown等等,为什么还需要自定义事件呢?其实就是对我们的行为进行更准确的描述。以上面的用户注册为例我们可以定义一个名为saveMessage的事件,在点击提交按钮时触发这个事件,好像看起来更加直观一些,不过这看起来和普通的函数调用没什么区别,仔细想了想函数调用和事件触发的区别就是由我们自己执行的函数就是函数调用,不是由我们执行的函数就是事件触发。看下面的代码:

window.onload = function(){
 var demo = document.getElementById("demo");
 demo.onclick = handler;
 function handler(){
  console.log("aaa");
 }
}

在我们点击按钮的时候就会打印aaa,而且很明显的可以看出函数并不是由我们调用的而是由浏览器来执行的,如果我们直接调用函数handler()一样可以打印aaa但这是由我们调用的所以是函数调用。

自定义事件的作用

自定义事件就是我们按照浏览器对事件的机制来自定义的函数。自定义事件,可以对我们的处理函数带来更好的说明,也可以为我们的插件带来更好的处理流程。假如我们又一个这样的需求:从服务器端拉取一组数据然后在HTML中显示成列表,然后标识出第一条数据,假如我们利用一个现有的处理函数,我们可能会这样来写:

dataTable("url");
$("table").find("input[type='checkbox']:first").prop("checked",true);

 这是不能达到我们目的的因为JS是单线程的而AJAX是异步的,当代码$("table").find("input[type='checkbox']:first").prop("checked",true)执行的时候,我们需要的数据还没有获取到。我们去修改插件的内部实现显然是不明智的,一个可以被人接受的插件必然是有合理的回调函数(或者自定义事件)的,假如现在有一个列表绘制成功的回调函数,我们就可以把这个回调函数看做是一个事件,我们可以对这个事件添加事件操作,定义好处理函数,然后在列表绘制成功时让插件来执行这个处理函数。

自定义事件实现

我们模拟浏览器原生的事件来实现自定义事件(en:自定义事件名称,fn:事件处理函数,addEvent:为DOM元素添加自定义事件,triggerEvent:触发自定义事件):

window.onload = function(){
 var demo = document.getElementById("demo");
 demo.addEvent("test",function(){console.log("handler1")});
 demo.addEvent("test",function(){console.log("handler2")});
 demo.onclick = function(){
  this.triggerEvent("test");
 }
}
Element.prototype.addEvent = function(en,fn){
 this.pools = this.pools || {};
 if(en in this.pools){
  this.pools[en].push(fn);
 }else{
  this.pools[en] = [];
  this.pools[en].push(fn);
 }
}
Element.prototype.triggerEvent = function(en){
 if(en in this.pools){
  var fns = this.pools[en];
  for(var i=0,il=fns.length;i<il;i++){
   fns[i]();
  }
 }else{
  return;
 }
}

由我们自己执行的函数是函数调用,非我们执行的函数我们可以叫做触发事件,既然函数不是由我们调用的,那么调用者怎样知道调用哪些函数就是一个问题了,所以就需要在添加事件函数和触发事件函数之间加上一些约束了,那就是两者之间有一个都能访问到的事件池,添加事件时把事件及对应的处理函数放在这个池子里,当满足触发条件时就去池子里找到要触发的事件,执行对应的处理函数,所以就有了我们上面的那一段代码。

对同一个功能(事件)可能有很多个处理函数,所以我们就需要一个集合去存储这些处理函数,这时我们应该反映出两个方案JSON或者数组,JSON的结构是key:value,对于处理函数来说名字是没有什么作用的所以我们用数组来保存处理函数,这组函数是处理什么功能的,所以我们还需要对这组处理函数由一个说明这时候就需要JSON了-->{eventName:[]}。

以简化的BootStrap模态窗来演示自定义事件的作用:

window.onload = function(){
 var show = document.getElementById("show");
 var hide = document.getElementById("hide");
 var content = document.getElementById("content");
 show.onclick = function(){
  content.modal("show");
 }
 hide.onclick = function(){
  content.modal("hide");
 }
 content.addEvent("show",function(){alert("show before")});
 content.addEvent("shown",function(){
  document.getElementById("input").focus();
  alert("show after");
 }); 
}
;(function(ep){
 ep.addEvent = function(en,fn){
  this.pools = this.pools || {};
  if(en in this.pools){
   this.pools[en].push(fn);
  }else{
   this.pools[en] = [];
   this.pools[en].push(fn);
  }
 }
 ep.triggerEvent = function(en){
  if(en in this.pools){
   var fns = this.pools[en];
   for(var i=0,il=fns.length;i<il;i++){
    fns[i]();
   }
  }else{
   return;
  }
 }
 ep.modal = function(t){
  switch(t){
   case "show":
    this.triggerEvent("show");
    this.style.display = "block";
    setTimeout(function(){this.triggerEvent("shown")}.bind(this),0);//该定时器主要是为了在视觉上先看见content,在弹出消息
    break;
   case "hide":
    this.style.display = "none";
    break;
   default:
    break;
  }
 }

}(Element.prototype));

我们可以预先定义好在弹窗出现之前和出现之后的处理函数,当弹窗触发对应事件的时候就执行对应的处理函数。

Javascript 相关文章推荐
用示例说明filter()与find()的用法以及children()与find()的区别分析
Apr 26 Javascript
animate动画示例(泪奔的小孩)及stop和delay的使用
May 06 Javascript
判断一个对象是否为jquery对象的方法
Mar 12 Javascript
JS下载文件|无刷新下载文件示例代码
Apr 17 Javascript
JavaScript实现网页截图功能
Oct 16 Javascript
JavaScript的Vue.js库入门学习教程
May 23 Javascript
JS集成fckeditor及判断内容是否为空的方法
May 27 Javascript
Javascript 事件冒泡机制详细介绍
Oct 10 Javascript
Vuex中mutations与actions的区别详解
Mar 01 Javascript
JS 正则表达式验证密码、邮箱格式的实例代码
Oct 28 Javascript
express如何解决ajax跨域访问session失效问题详解
Jun 20 Javascript
jquery css实现流程进度条
Mar 26 jQuery
详解在vue-cli中使用路由
Sep 25 #Javascript
Bootstrap一款超好用的前端框架
Sep 25 #Javascript
vue封装第三方插件并发布到npm的方法
Sep 25 #Javascript
javascript input输入框模糊提示功能的实现
Sep 25 #Javascript
vue-cli中的webpack配置详解
Sep 25 #Javascript
react.js 父子组件数据绑定实时通讯的示例代码
Sep 25 #Javascript
react native与webview通信的示例代码
Sep 25 #Javascript
You might like
PHP has encountered an Access Violation
2007/01/15 PHP
9个经典的PHP代码片段分享
2014/12/18 PHP
php layui实现前端多图上传实例
2019/07/30 PHP
jquery 简短几句代码实现给元素动态添加及获取提示信息
2011/09/01 Javascript
ie支持function.bind()方法实现代码
2012/12/27 Javascript
js修改onclick动作的四种方法(推荐)
2016/08/18 Javascript
bootstrap警告框示例代码分享
2017/05/17 Javascript
js断点调试经验分享
2017/12/08 Javascript
浅析Vue 和微信小程序的区别、比较
2018/08/03 Javascript
JS实现将对象转化为数组的方法分析
2019/01/21 Javascript
Vue.js实现备忘录功能
2019/06/26 Javascript
基于vue实现圆形菜单栏组件
2019/07/05 Javascript
如何使用JavaScript检测空闲的浏览器选项卡
2020/05/28 Javascript
如何在selenium中使用js实现定位
2020/08/18 Javascript
[55:45]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.24
2019/09/10 DOTA
Python中查看文件名和文件路径
2017/03/31 Python
python下10个简单实例代码
2017/11/15 Python
Python实现k-means算法
2018/02/23 Python
numpy.array 操作使用简单总结
2019/11/08 Python
python tornado使用流生成图片的例子
2019/11/18 Python
windows环境中利用celery实现简单任务队列过程解析
2019/11/29 Python
Python 如何对文件目录操作
2020/07/10 Python
浅谈pandas dataframe对除数是零的处理
2020/07/20 Python
Python连接Impala实现步骤解析
2020/08/04 Python
CSS3实现超酷的黑猫警长首页
2016/04/26 HTML / CSS
世界上最大的皮肤科医生拥有和经营的美容网站:LovelySkin
2021/01/03 全球购物
.NET现在共支持多少种语言
2014/02/26 面试题
装潢设计实习自我鉴定
2013/09/19 职场文书
行政管理人员精品工作推荐信
2013/11/04 职场文书
医药销售求职信范文
2014/02/01 职场文书
五四青年节比赛演讲稿
2015/03/18 职场文书
中秋节祝酒词
2015/08/12 职场文书
mysql的MVCC多版本并发控制的实现
2021/04/14 MySQL
世界各国短波电台对东亚播送时间频率表(SW)
2021/06/28 无线电
golang用type-switch判断interface的实际存储类型
2022/04/14 Golang
nginx rewrite功能使用场景分析
2022/05/30 Servers