JavaScript 设计自己的事件

以下代码，定义了一个类MailRoom，并默认含有"gust"和"mail"两个事件。

实现了：

① 添加事件

② 添加事件的响应函数

③ 触发事件

④ 移除事件的单个响应函数

最终，用一个实例mailRoom验证了MailRoom的功能。

/**
 * Filename: Events.js
 * Description: This file is user to simulate a event of javascript.
 * Author: 猎空de代码
 * Date: 2012/2/27
 */

/**
 * A Class with its private events.
 */ 
MailRoom = function() {
	this.events = ['gust', 'mail'];
	this.listeners = {};
}

// 1. addEvent
MailRoom.prototype.addEvent = function(eName) {
	if (-1 == this.events.indexOf(eName)) {
		this.events.push(eName);
	}
}

// 2. addListener
MailRoom.prototype.addListener = function(eName, fn) {
	if (!eName) {
		return;
	}
	if (-1==this.events.indexOf(eName)) {
		this.events.push(eName);
		this.listeners[eName] = [fn];
	}
	var arr = this.listeners[eName];
	if(!arr) {
		arr = [fn];
	} else {
		if(-1==arr.indexOf(fn)) {
			arr.push(fn);
		}
	}
	this.listeners[eName] = arr;
}

// 3. fireEven
MailRoom.prototype.fireEvent = function(eName) {
	if(!eName || -1==this.events.indexOf(eName)) {
		return ;
	}
	var arr = this.listeners[eName];
	for(var i=0; i<arr.length; i++) {
		var fn = arr[i];
		fn();
	}
}

// 4. removeListener
MailRoom.prototype.removeListener = function(eName, fn) {
	if(!eName || this.events.indexOf(eName)==-1) {
		return ;
	}
	var arr = this.listeners[eName];
	if(-1 != arr.indexOf(fn)) {
		arr.splice(arr.indexOf(fn), 1);
	}
}

// Define some shourcut.
MailRoom.prototype.on = MailRoom.prototype.addListener;
MailRoom.prototype.un = MailRoom.prototype.removeListener;
MailRoom.prototype.fire = MailRoom.prototype.fireEvent;


/**
 * Example 
 */
window.onload = function() {
	function insertInfo(sInfo) {
		document.body.innerHTML += sInfo + "<br />";
	}
	var mailRoom = new MailRoom();
	var fn1 = function() {
		insertInfo("605室1号床，你爸来了！");
	}
	var fn2 = function() {
		insertInfo("2年3班班主任，你有邮件！");
	}
	var fn3 = function() {
		insertInfo("605室1号床，你妈来了！");
	}
	
	mailRoom.on("gust", fn1);
	mailRoom.fire("gust");
	mailRoom.on("mail", fn2);
	mailRoom.fire("mail");
	mailRoom.on("gust", fn3);
	mailRoom.fire("gust");
	
	mailRoom.un("gust", fn3);
	mailRoom.fire("gust");
	
	mailRoom.on("newOne",function() {
		insertInfo("<br/>我是新引入的事件");
	})
	mailRoom.fire("newOne");
}

运行结果：

参考自：《江湖Ext》第5章 Ext 事件系统