js自定義事件及事件交互原理概述(二)
2024-05-06 14:19:46
供稿：網友
js自定義事件（一）的目的只是讓大家簡單的理解自定事件是如何模擬出來的，大家不難發現會有很多缺陷，比如：
1、此事件對象只能注冊一個事件，不能提供多個事件
2、注冊方法沒有返回的一些信息
下面我們就來解決這些問題。如下為MyEvent.js源代碼：
代碼如下:
function MyEvent(){
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<len;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<len;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,
