利用Javascript实现一套自定义事件机制

前言

事件机制为我们的web开发提供了极大的方便，使得我们能在任意时候指定在什么操作时做什么操作、执行什么样的代码。

如点击事件，用户点击时触发；keydown、keyup事件，键盘按下、键盘弹起时触发；还有上传控件中，文件加入前事件，上传完成后事件。

由于在恰当的时机会有相应的事件触发，我们能为这些事件指定相应的处理函数，就能在原本的流程中插入各种各样的个性化操作和处理，使得整个流程变得更加丰富。

诸如click、blur、focus等事件是原本的dom就直接提供的原生事件，而我们使用的一些其他控件所使用的各种事件则不是原生dom就有的，如上传控件中通常都会有上传开始和完成事件，那么这些事件都是如何实现的呢？

也想在自己的开发的控件中加入类似的事件机制该如何实现呢？ 就让我们来一探究竟。

事件应有的功能

在实现之前，我们首先来分析事件机制应该有的基本功能。

简单来说，事件必须要提供以下几种功能:

前期准备

我们来观察一下事件的一个特征，事件必定是属于某个对象的。如:focus和blur事件是可获取焦点的dom元素的，input事件是输入框的，上传开始和上传成功则是上传成功的。

也就是说，事件不是独立存在的，它需要一个载体。那么我们怎么让事件有一个载体呢？一种简单的实现方案则是，将事件作为一个基类，在需要事件的地方继承这个事件类即可。

我们将绑定事件、触发事件、取消绑定事件分别命名为:on、fire、off，那么我们可以简单写出这个事件类:

function CustomEvent() { this._events = {};}CustomEvent.prototype = { constructor: CustomEvent, // 绑定事件 on: function () { }, // 触发事件 fire: function () { }, // 取消绑定事件 off: function () { }};

事件绑定

首先来实现事件的绑定，事件绑定必须要指定事件的类型和事件的处理函数。

那么除此之外还需要什么呢？我们是自定义事件，不需要像原生事件一样指定是冒泡阶段触发还是捕获阶段触发，也不需要像jQuery里一样可以额外指定那些元素触发。

而事件函数里面this一般都是当前实例，这个在某些情况下可能不适用，我们需要重新指定事件处理函数运行时的上下文环境。

因此确定事件绑定时三个参数分别为:事件类型、事件处理函数、事件处理函数执行上下文。

那么事件绑定要干什么呢，其实很简单，事件绑定只用将相应的事件名称和事件处理函数记录下来即可。

我的实现如下:

{ /**  * 绑定事件  *   * @param {String} type 事件类型  * @param {Function} fn 事件处理函数  * @param {Object} scope 要为事件处理函数绑定的执行上下文  * @returns 当前实例对象  */ on: function (type, fn, scope) {  if (type + '' !== type) {   console && console.error && console.error('the first argument type is requird as string');   return this;  }  if (typeof fn != 'function') {   console && console.error && console.error('the second argument fn is requird as function');   return this;  }  type = type.toLowerCase();  if (!this._events[type]) {   this._events[type] = [];  }  this._events[type].push(scope ? [fn, scope] : [fn]);  return this; }}