自定义事件(Custom event)

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

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

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

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

?

1 2 3 4 5

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

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

我们把代码稍微演变下

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

// 添加自定义事件 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。如图

代码实现如下

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

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     } }

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

?

1 2 3 4 5 6

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

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