自定义事件(Custom event)

前面用了8篇回顾浏览器中内置事件，且写出了一个基本完整，功能还算强大的事件模块。
如果您愿意，还可以继续添加一些功能如事件代理、一次性添加多个事件、和选择器结合一次性为多个元素添加事件。

当然这些都不是必须的，可根据需求自行扩展。

这篇开始看看自定义事件，自定义事件有许多应用场景。实际上它实现了“观察者模式”。
使用过google（或灵图）地图API的同学应该知道地图有个缩放事件zoom，即地图放大或缩小的时候触发。这个zoom就是自定义事件。感兴趣的可以点击此处看看。

自定义事件并不深奥，几行代码就可以实现一个

var obj = {};
obj['click'] = function(){
	alert('click');
}
obj['click']();

有些同学可能觉得这也算自定义事件吗？明明只是定义了一个对象，对象方法，然后调用了该方法而已。
是的，自定义事件本质就是如此。只是方法名(事件名称)通常是由API设计者设计（取名）的，而方法体则由客户端程序员来实现。

我们把代码稍微演变下

// 添加自定义事件
function addEvent(obj, type, handler){
	obj[type] = handler;
}
// 移除自定义事件
function removeEvent(obj, type){
	delete obj[type];
}
// 触发/派发自定义事件
function dispatchEvent(obj, type){
	obj[type]();
}

var obj = {};
function f1(){alert(1)}
addEvent(obj, 'click', f1);
dispatchEvent(obj, 'click'); // -> 1

这次写了三个工具函数addEvent/removeEvent/dispatchEvent来实现添加/移除/触发事件。然后给一个JS对象添加了自定义事件“click”，最后触发。或许这种方式添加自定义事件有人会觉得舒服/习惯很多。但请注意，添加事件本质上仍然是在给对象定义一个方法，触发事件也仍然只是方法调用。

 

多数库会用一个哈希来存储事件管理器，哈希的key是事件名，哈希的值为一个数组存储事件handler。如图

代码实现如下

PubSub = {
	subscribe: function(event, callback) {
		var events = this._events || (this._events = {})
		this._events[event] || (this._events[event] = []).push(callback)
	},
	publish: function() {
		var args = Array.prototype.slice.call(arguments, 0)
		var event = args.shift()
		
		var list, events
		if ( !(events = this._events) ) return
		if ( !(list = this._events[event]) ) return
		
		for (var i=0; i<list.length; i++) {
			list[i].apply(this, args)
		}
		return this
	}
}

对，这也正是发布者/订阅者。下面使用下

PubSub.subscribe('go', function() {
	alert('go,go')
})
document.body.onclick = function() {
	PubSub.publish('go') // go, go
}

点击窗体会弹出 "go,go"