事件是一個觀察者模式,即由主體(DOM元素)和觀察者(事件處理代碼)組成,主體可以脫離觀察者單獨存在,觀察者知道主體并能注冊事件的回調函數。
下面是自定義事件的基本模式:
function EventTarget () {
this.handlers = {}; // 對象屬性,有三個方法
// this.handlers = {
// type1 : [type1Fun1, type1Fun2],
// type2 : [type2Fun1, type2Fun2]
// }
}
EventTarget.prototype = {
constructor : EventTarget,
/**綁定事件
* param type : 自定義事件類型
* param handler : 自定義事件綁定的回調函數
*/
addHandler : function (type, handler) {
// 如果傳入的事件類型為undefined,就創建一個數組
if (typeof this.handlers[type] == "undefined") {
this.handlers[type] = [];
}
// 再將回調函數添加到數組中去
this.handlers[type].push(handler);
},
/**觸發事件
* param event : 傳入的對象
* { type : "show", message : "hello world"}
*/
fire : function (event) {
// alert(event.target); // undefined
// alert(this instanceof EventTarget); // true
// alert(Object.prototype.toString.call(this)); // [object Object]
if (!event.target) {
event.target = this;
}
if (this.handlers[event.type] instanceof Array) {
var handlers = this.handlers[event.type];
// alert(handlers);
// alert(event.type); // message
// alert(handlers.length); // 1
// alert(handlers[0]);
for (var i = 0, len = handlers.length; i < len; i++) {
handlers[i](event); // 調用對應事件的回調函數
}
} else {
throw new Error("No event can call");
}
},
/**注銷事件的回調函數
* param type : 事件類型
* param handler : 回調函數
* 調用示例:removeHanlder("show", showMessage);
* 注銷show類型的showMessage函數
**/
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); // 刪除索引值,即刪除對應的事件的其中一個回調函數
}
}
}
function handleMessage(event){
alert("接受的信息: " + event.message);
}
function showMessage(event){
alert("展示的信息: " + event.message);
}
var eventTarget = new EventTarget();
eventTarget.addHandler("message", handleMessage); // 注冊message類型的handleMessage
eventTarget.addHandler("show", showMessage); // 注冊show類型的showMessage
eventTarget.fire({ type : "message", message : "hello"}); // 觸發message類型的handleMessage,
eventTarget.fire({ type : "show", message : "world"}); // 觸發show類型的showMessage
eventTarget.removeHandler("show", showMessage); // 解除message類型的handleMessage
eventTarget.fire({ type : "message", message : "hello"}); // 觸發message類型的handleMessage
eventTarget.fire({ type : "show", message : "world"}); // 觸發show類型的showMessage