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 相关文章推荐
js自执行函数的几种不同写法的比较
Aug 16 Javascript
Jquery 的outerHeight方法使用介绍
Sep 11 Javascript
Mac地址验证的javascript代码
Nov 09 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
Feb 19 Javascript
Bootstrap表格和栅格分页实例详解
May 20 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
Aug 30 Javascript
详解闭包解决jQuery中AJAX的外部变量问题
Feb 22 Javascript
JavaScript中一些特殊的字符运算
Aug 17 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
Aug 22 Javascript
webpack4实现不同的导出类型
Apr 09 Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
May 29 Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
Oct 14 Javascript
详解在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
全国FM电台频率大全 - 4 山西省
2020/03/11 无线电
浅析PHP中strlen和mb_strlen的区别
2014/08/31 PHP
PHP中上传多个文件的表单设计例子
2014/11/19 PHP
浅谈php中include文件变量作用域
2015/06/18 PHP
深入理解php printf() 输出格式化的字符串
2016/05/23 PHP
php断点续传之文件分割合并详解
2016/12/13 PHP
用AJAX返回HTML片段中的JavaScript脚本
2010/01/04 Javascript
jquery改变disabled的boolean状态的三种方法
2013/12/13 Javascript
JQuery中使用on方法绑定hover事件实例
2014/12/09 Javascript
jQuery大于号(&gt;)选择器的作用解释
2015/01/13 Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
2015/08/10 Javascript
jQuery事件与动画基础详解
2017/02/23 Javascript
jQuery自定义元素右键点击事件(实现案例)
2017/04/28 jQuery
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
2018/03/13 Javascript
详解VUE调用本地json的使用方法
2019/05/15 Javascript
vue路由传参页面刷新参数丢失问题解决方案
2019/10/08 Javascript
js中的面向对象之对象常见创建方法详解
2019/12/16 Javascript
通过实例解析vuejs如何实现调试代码
2020/07/16 Javascript
React实现评论的添加和删除
2020/10/20 Javascript
[57:29]Alliance vs KG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/17 DOTA
PyQt弹出式对话框的常用方法及标准按钮类型
2019/02/27 Python
Python自定义一个异常类的方法
2019/06/27 Python
Python操作SQLite数据库过程解析
2019/09/02 Python
Django单元测试中Fixtures用法详解
2020/02/25 Python
python 轮询执行某函数的2种方式
2020/05/03 Python
土耳其家居建材网站:Koçtaş
2016/11/22 全球购物
欧缇丽美国官网:Caudalie美国
2016/12/31 全球购物
法国床上用品商店:La Compagnie du lit
2019/12/26 全球购物
接口可以包含哪些成员
2012/09/30 面试题
校庆口号
2014/06/20 职场文书
反腐倡廉标语
2014/06/24 职场文书
2014年国庆节活动总结
2014/08/26 职场文书
工程项目经理岗位职责
2015/02/02 职场文书
2015年会计工作总结范文
2015/05/26 职场文书
mysql批量新增和存储的方法实例
2021/04/07 MySQL
MySQL的表级锁,行级锁,排它锁和共享锁
2022/07/15 MySQL