<p>　　在W3C新的事件模型框架中，IE和Mozilla都实现了相应的版本，IE的是attachEvent和detachEvent来实现元素事件的添加和删除，而Mozilla则是标准的addEventListener和 removeEventListener。在传统的javascript事件模型中，我们没办法为一个页面元素注册多个事件，只有靠自己来实现观察者模式。代码来自《ajax in action》,我添加了注释</p><p><code>//命名空间<br />var jsEvent = new Array();<br />　　<br />//构造函数<br />jsEvent.EventRouter = function(el,eventType){<br />//内部维护一个事件列表<br />this.lsnrs = new Array();<br />this.el = el;<br />el.eventRouter = this;<br />//注册回调函数<br />el[eventType] = jsEvent.EventRouter.callback;<br />};<br />　　<br />//添加事件<br />jsEvent.EventRouter.prototype.addListener = function(lsnr){<br />this.lsnrs.append(lsnr,true);<br />} ;<br />　　<br />//移除事件<br />jsEvent.EventRouter.prototype.removeListener=<br />function(lsnr){<br />this.lsnrs.remove(lsnr);<br />};<br />　　<br />//通知所有事件<br />jsEvent.EventRouter.prototype.notify = function(e){<br />var lsnrs = this.lsnrs;<br />for(var i=0;i<lsnrs.length;i++){<br />　var lsnr = lsnrs[i];<br />　lsnr.call(this,e);<br />}<br />};<br />//回调函数调用notify<br />jsEvent.EventRouter.callback=function(event){<br />var e = event || window.event;<br />var router = this.eventRouter;<br />router.notify(e);<br />};<br />　　<br />Array.prototype.append = function(obj,nodup){<br />if(nodup){<br />　this[this.length]=obj;<br />}<br />};<br />Array.prototype.remove = function(o)<br />{<br />　 var i = this.indexOf(o);<br />　 if (i>-1)<br />　{<br />　　this.splice(i,1);<br />　 }<br />　　 return (i>-1);<br />　 }　<br />};</code></p><p>　　这里比较巧妙的就是</p><p>　　el.eventRouter = this;</p><p>　　//注册回调函数</p><p>　　el[eventType] = jsEvent.EventRouter.callback;</p><p>　　首先给el元素添加属性eventRouter是当前的EventRouter对象，然后，比如eventType假设为onclick，el是一个button元素，那么这里就是el[onclick]=jsEvent.EventRouter.callback;相当于el.onclick=jsEvent.EventRouter.callback;</p><p>　　而请注意这个回调函数callback将首先得到元素的eventRouter对象，再调用此对象的notify方法触发所有注册的事件。</p><p>　　再请注意notify函数里面这一行：</p><p>　　lsnr.call(this,e);</p><p>　　我们把event对象传入此函数作参，而var e = event || window.event;那么所有事件函数的第一个参数都将是event对象，避免了IE需要通过window.event得到的事件对象的浏览器不一致行为。</p><p>　　使用此对象方式：</p><p><code>　var mat=document.getElementById('mousemat');<br />　　cursor=document.getElementById('cursor');<br />　　var mouseRouter=new jsEvent.EventRouter(mat,"onmousemove");<br />　　mouseRouter.addListener(writeStatus);<br />　　mouseRouter.addListener(drawThumbnail);</code></p><p>　　来源：<a href="http://www.blogjava.net/killme2008/archive/2007/03/16/104150.html">http://www.blogjava.net/killme2008/archive/2007/03/16/104150.html</a></p>