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 相关文章推荐
javascript 设置文本框中焦点的位置
Nov 20 Javascript
javascript 手动给表增加数据的小例子
Jul 10 Javascript
JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
Jan 11 Javascript
JavaScript操作DOM元素的childNodes和children区别
Apr 01 Javascript
浅谈javascript的分号的使用
May 12 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
Feb 13 Javascript
基于Two.js实现星球环绕动画效果的示例
Nov 06 Javascript
Node解决简单重复问题系列之Excel内容的获取
Jan 02 Javascript
JavaScript面试出现频繁的一些易错点整理
Mar 29 Javascript
Vue 2.0 中依赖注入 provide/inject组合实战
Jun 20 Javascript
微信小程序表单验证WxValidate的使用
Nov 27 Javascript
解决vuex刷新数据消失问题
Nov 12 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
广播爱好者需要了解的天线知识
2021/03/01 无线电
php用header函数实现301跳转代码实例
2013/11/25 PHP
学习php中的正则表达式
2014/08/17 PHP
CodeIgniter读写分离实现方法详解
2016/01/20 PHP
javaScript - 如何引入js代码
2021/03/09 Javascript
window.addeventjs事件驱动函数集合addEvent等
2008/02/19 Javascript
基于jquery的图片懒加载js
2010/06/30 Javascript
jQuery选择没有colspan属性的td的代码
2010/07/06 Javascript
jquery日历控件实现方法分享
2014/03/07 Javascript
JavaScript 学习笔记之语句
2015/01/14 Javascript
简单介绍JavaScript中字符串创建的基本方法
2015/07/07 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
2016/11/11 Javascript
解析jquery easyui tree异步加载子节点问题
2017/03/08 Javascript
jQuery实现多张图片上传预览(不经过后端处理)
2017/04/29 jQuery
浅谈JavaScript面向对象--继承
2019/03/20 Javascript
JavaScript中如何对多维数组(矩阵)去重的实现
2019/12/04 Javascript
微信小程序 bindtap 传参的实例代码
2020/02/21 Javascript
[02:19]2018年度DOTA2最佳核心位选手-完美盛典
2018/12/17 DOTA
pycharm 使用心得(五)断点调试
2014/06/06 Python
使用Python编写类UNIX系统的命令行工具的教程
2015/04/15 Python
利用Python命令行传递实例化对象的方法
2016/11/02 Python
python、java等哪一门编程语言适合人工智能?
2017/11/13 Python
使用python 爬虫抓站的一些技巧总结
2018/01/10 Python
Selenium+Python 自动化操控登录界面实例(有简单验证码图片校验)
2019/06/28 Python
对django 2.x版本中models.ForeignKey()外键说明介绍
2020/03/30 Python
Tensorflow之MNIST CNN实现并保存、加载模型
2020/06/17 Python
Python 中Operator模块的使用
2021/01/30 Python
创业计划书如何吸引他人眼球
2014/01/10 职场文书
食品销售计划书
2014/04/26 职场文书
学校班班通实施方案
2014/06/11 职场文书
销售竞赛活动方案
2014/08/23 职场文书
群众路线教师自我剖析材料
2014/09/29 职场文书
人民的好儿女观后感
2015/06/18 职场文书
送给小学生的暑假礼物!小学生必背99首古诗
2019/07/02 职场文书
Axios取消重复请求的方法实例详解
2021/06/15 Javascript
Python&Matlab实现灰狼优化算法的示例代码
2022/03/21 Python