JavaScript多事件处理兼容方案：attachEvent与addEventListener

传统事件绑定的局限性

近期在开发中涉及JavaScript事件处理机制，查阅了相关资料。

以往编写JavaScript代码时，事件绑定通常采用

object.event = handler;

这种初始化方式在Internet Explorer、Mozilla/Firefox以及Opera浏览器中通用。然而，该方法存在一个局限：一个事件只能对应一个处理函数。若需让一个事件依次触发多个处理过程，此方式便不再适用。

多浏览器兼容的事件绑定方案

自Internet Explorer 5.0起，引入了attachEvent方法，允许为单个事件指派多个处理过程。该方法同样适用于当前的Opera浏览器。不过，Mozilla/Firefox不支持此方法，但它提供了addEventListener方法，功能与attachEvent类似，均用于绑定多个处理过程。两者的主要区别在于：attachEvent要求事件名以“on”开头，而addEventListener不需要“on”前缀；此外，addEventListener接受第三个参数，通常设为false即可。

因此，若需在程序中为事件绑定多个处理过程，只需先判断浏览器类型，再选择使用attachEvent或addEventListener。具体实例如下：

if (document.all) {
window.attachEvent('onload', handler1);
window.attachEvent('onload', handler2);
}  
} else {
window.addEventListener('load', handler1, false);
window.addEventListener('load', handler2, false);
} 

注意：attachEvent绑定的多个处理函数执行顺序是不确定的，因此这些函数之间不应存在顺序依赖。此外，attachEvent和addEventListener不仅适用于window对象，其他DOM对象也支持这些方法。

function addEvent(obj, evenTypeName, fn){
if (obj.addEventListener){
obj.addEventListener(evenTypeName, fn, true);
return true;
} else if (obj.attachEvent){
return obj.attachEvent("on"+evenTypeName, fn);
} else {
return false;
 }  
}