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 相关文章推荐
把textarea中字符串里含有的回车换行替换成&amp;lt;br&amp;gt;的javascript代码
Apr 20 Javascript
js 巧妙去除数组中的重复项
Jan 25 Javascript
基于JavaScript实现生成名片、链接等二维码
Sep 20 Javascript
JavaScript的React框架中的JSX语法学习入门教程
Mar 05 Javascript
node.js实现端口转发
Apr 14 Javascript
浅析JavaScript中命名空间namespace模式
Jun 22 Javascript
js判断手机系统是android还是ios
Mar 07 Javascript
Vuex 进阶之模块化组织详解
Jan 12 Javascript
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
jQuery中元素选择器(element)简单用法示例
May 14 jQuery
JS立即执行的匿名函数用法分析
Nov 04 Javascript
Javascript实现简易天数计算器
May 18 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
php高级编程-函数-郑阿奇
2011/07/04 PHP
php中计算程序运行时间的类代码
2012/11/03 PHP
PHP代码优化的53个细节
2014/03/03 PHP
基于PHP实现通过照片获取ip地址
2016/04/26 PHP
如何在Mozilla Gecko 用Javascript加载XSL
2007/01/09 Javascript
让任务管理器中的CPU跳舞的js代码
2008/11/01 Javascript
jQuery 打造动态下滑菜单实现说明
2010/04/15 Javascript
突发奇想的一个jquery插件
2010/11/19 Javascript
统计出现最多的字符次数的js代码
2010/12/03 Javascript
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
2011/11/15 Javascript
jQuery之end()和pushStack()使用介绍
2012/02/07 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
2014/06/20 Javascript
javascript使用for循环批量注册的事件不能正确获取索引值的解决方法
2014/12/20 Javascript
JavaScript 表单处理实现代码
2015/04/13 Javascript
js操作table元素实现表格行列新增、删除技巧总结
2015/11/18 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
2017/11/14 Javascript
javaScript和jQuery自动加载简单代码实现方法
2017/11/24 jQuery
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
2018/08/22 Javascript
微信小程序视图控件与bindtap之间的问题的解决
2019/04/08 Javascript
Vue中对iframe实现keep alive无刷新的方法
2019/07/23 Javascript
使用 Vue 实现一个虚拟列表的方法
2019/08/20 Javascript
JS继承定义与使用方法简单示例
2020/02/19 Javascript
[01:10:57]Liquid vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python反射的用法实例分析
2018/02/11 Python
Python学习笔记之Django创建第一个数据库模型的方法
2019/08/07 Python
django框架中ajax的使用及避开CSRF 验证的方式详解
2019/12/11 Python
解决python中import文件夹下面py文件报错问题
2020/06/01 Python
基于python+selenium自动健康打卡的实现代码
2021/01/13 Python
用友笔试题目
2016/10/25 面试题
会计学专业自荐信
2014/06/25 职场文书
2014乡镇机关党员个人对照检查材料思想汇报
2014/10/09 职场文书
幼儿园万圣节活动总结
2015/05/05 职场文书
2016年教师节贺卡寄语
2015/12/04 职场文书
小学三年级数学教学反思
2016/02/16 职场文书
导游词之峨眉山
2019/12/16 职场文书
小喇叭开始广播了! 四十多年前珍贵老照片
2022/05/09 无线电