前言

事件機制為我們的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; }}