事件就是用户和浏览器交互的一种途径,在本例中我们的代码逻辑一般就是收集用户填写信息,验证信息合法性,利用AJAX与服务器交互,需要的朋友可以参考下

事件

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

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

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

最新资讯
美司法部控告六人涉嫌贿赂亚马逊员工以获得市场优势

美司法部控告六人涉嫌

据报道,美国司法部周五指控六人参与贿赂亚马逊员工和承
最新发现的一次大灭绝事件

最新发现的一次大灭绝

2.33亿年前,地球成为“炼狱”。在我们现在所知的加拿大
拯救替罪羊,科学能帮到我们什么?

拯救替罪羊,科学能帮到

被错误指控的人,即使最终能洗脱罪名,通常也需要多年的等
恒大汽车要登陆科创板:汽车尚未卖一辆 已聚集了许家印马云马化腾

恒大汽车要登陆科创板

恒大汽车董事会宣布决议,拟发行人民币股份于上交所科创
才貌双全的清华女神教授,2020年又拿奖,却说只想“任性”地活

才貌双全的清华女神教

距颜宁2017年辞去清华大学教授,已经过去了三年。看起来
爱立信同意11亿美元收购美5G方案商Cradlepoint

爱立信同意11亿美元收

瑞典电信设备制造商爱立信表示,它已同意以11亿美元的价
最新文章
详解Vue的ref特性的使用

详解Vue的ref特性的使

这篇文章主要介绍了详解Vue的ref特性的使用,文中通过
vue学习笔记之slot插槽基本用法实例分析

vue学习笔记之slot插

这篇文章主要介绍了vue学习笔记之slot插槽基本用法,结
vue跳转方式(打开新页面)及传参操作示例

vue跳转方式(打开新页

这篇文章主要介绍了vue跳转方式(打开新页面)及传参操作,
vue学习笔记之过滤器的基本使用方法实例分析

vue学习笔记之过滤器

这篇文章主要介绍了vue学习笔记之过滤器的基本使用方
js获取本日、本周、本月的时间代码

js获取本日、本周、本

本篇文章给大家分享的内容是利用js如何获取本日、本周
node crawler如何添加promise支持

node crawler如何添加

这篇文章主要介绍了node crawler如何添加promise支持,