js自訂事件及事件互動原理概述(二)_javascript技巧

js自訂事件（一）的目的只是讓大家簡單的理解自定事件是如何模擬出來的，大家不難發現會有很多缺陷，比如：
1、此事件物件只能註冊一個事件，不能提供多個事件
2、註冊方法沒有回傳的一些資訊

下面我們就來解決這些問題。如下為MyEvent.js原始碼：

複製程式碼 程式碼如下:

functionEvent( {
this.handlers={};
}
MyEvent.prototype={
addHandler:function(type,handler)
{
if(typeof this.handlers[type] =="undefined")
{
this.handlers[type]=[];
}
this.handlers[type].push(handler);
},
fire:function(event)
{if(this.handlers[event.type] instanceof Array)
{
var handlers=this.handlers[event.type];
for(var i= 0, len=handlers.length;i{
handlers[i](event);
}
}
},
removeHandler:function(type ,handler)
{
if(this.handlers[type] instanceof Array)
{
var handlers=this.handlers[type];
for(var i= 0, len= handlers.length;i{
if(handlers[i]===handler)
{
break;
}
}
handlers. splice(i,1);
}
}
};

這類就是第一篇的最佳化。
屬性handler變成了handlers，變成了一個陣列
addHandler()方法接受兩個參數：事件類型和用於處理該事件的函數。當方法呼叫時，會進行一次檢查，看看handlers屬性中是否已經存在一個針對該事件類型的陣列
；如果沒有，則建立一個新的。然後使用push()將該處理程序加入到陣列的末尾。

fire()方法用來觸發一個事件，該方法接受一個參數，是一個至少包含type屬性的對象，不然無法確定handlers裡面是否已經存在。它會透過此type去尋找對應該事件類型的一組處理程序，呼叫各個函數，並給出event物件。因為這些都是自訂對象，所以event對像上面的其他東西可以由你自己定義。

removeHandler()方法時addHandler()的輔助，它們接受的參數一樣：事件的類型和事件處理程序。這個方法搜尋事件處理程序的陣列找到要刪除的處理程序的位置。如果找到了，則使用break運算子退出迴圈。然後使用splice()方法將該項目從陣列中刪除。

這裡使用方式我們換一種比較長用的形式，現在據我說知很多產品在使用事件上有兩種方式，一種是直接繼承（js本省沒有此概念，不過我們可以透過原型鏈模擬出繼承的效果，此處不做詳細解釋）此事件對象，那麼就會擁有了這些行為，不過此方法比較局限，另一種方式更常用一些，就是需要使用事件的類別上面創建一個屬性用於存放此物件。如：子相同目錄下再建立一個Student.js文件，裡面的程式碼如下：

複製程式碼 程式碼如下:

function Student(name)
{
this.myEvent=new MyEvent();
this.name=name;
}
Student.prototype={
setName:function(name)
{
var eventStart={
type:"changeNameStart",
newName:name,
oldName:this.name
};
this.myEvent.fire(eventStart);
this.name=name;
}
}

這裡有一個學生類，建構子裡面初始化一個MyEvent物件作為屬性，透過參數初始化name屬性。

提供一個方法setName用來改變名字，不過在改變名字之前設定了可能觸發事件changNameStart的監聽。
建立一個html頁面，放於同目錄下，程式碼如下：

複製程式碼 程式碼如下:

這樣使用起來就會很方便，也是常用的使用方式。
一般在真正的專案裡面使用使用事件時我們還需要做一些最佳化，例如：
1、使用者並不知道我們提供了哪些事件，從程式碼來看好像什麼事件都可以加入到handlers裡面，但是真正起效果的（我們設定fire()方法的地方）事件我們並不能從程式碼裡面很直觀的看出來，一般做產品，在這方面都需要再做考慮。

2、有沒有發現fire的參數event好像沒用固定，在大興項目裡面，最好event也做成一個類型，在fire的地方就比較方便使用一些，event可能會有很多種類型，那時可能fire裡面會出現一些判定了。
希望對初入js事件的讀者有幫助，互相交流。