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,
oldName:this.name
};
this.myEvent.fire(eventStart);
this.name=name;
}
}
這裡有一個學生類,構造函數裡面初始化一個MyEvent對象作為屬性,通過參數初始化name屬性。
提供一個方法setName用於改變名字,不過在改變名字之前設置了可能觸發事件changNameStart的監聽。
創建一個html頁面,放於同個目錄下,代碼如下:
復制代碼 代碼如下:
<html>
<head>
<title></title>
<script type="text/javascript" src="MyEvent.js"></script>
<script type="text/javascript" src="Student.js"></script>
<script type="text/javascript">
function init()
{
//初始化一個學生對象
var student=new Student("Mr liu");
//注冊事件changNameStart
student.myEvent.addHandler("changeNameStart",myMethod);
//設置name,將會觸發事件changNameStart
student.setName("Mr Huang");
}
function myMethod(e)
{
alert("事件類型:"+e.type+"; 改變前的名字:"+ e.oldName+"; 改變後的名字:"+ e.newName);
}
</script>
</head>
<body>
<input type="button" onclick="init()" value="測試" />
</body>
</html>
這樣使用起來就會很方便,也是一種常用的使用方式。
一般在真正的項目裡面使用使用事件時我們還需要做一些優化,比如:
1、用戶並不知道我們提供了哪些事件,從代碼來看好像什麼事件都可以添加到handlers裡面,但是真正起效果的(我們設置fire()方法的地方)事件我們並不能從代碼裡面很直觀的看出來,一般做產品,在這方面都需要再做考慮。
2、有沒有發現fire的參數event好像沒用固定,在大興項目裡面,最好event也做成一個類型,在fire的地方就比較方便使用一些,event可能會有很多種類型,那時可能fire裡面會出現一些判定了。
希望對初入js事件的讀者有所幫助,互相交流。