本文介绍如何通过封装 addEvent 函数，统一处理现代浏览器与旧版 IE 的事件绑定差异。针对支持 DOM 的浏览器使用 addEventListener，而针对 MSIE 使用 attachEvent，并通过属性挂载和闭包方式解决事件参数传递问题，实现跨浏览器的事件监听注册。
跨浏览器事件绑定封装思路
对于支持 DOM 规范的浏览器，通常使用 addEventListener() 方法为元素添加事件监听。
而在旧版 Microsoft Internet Explorer (MSIE) 中，则需使用 attachEvent() 方法来绑定事件。由于两者实现机制不同，我们需要封装一个统一的容器方法来兼容这两种浏览器的处理逻辑，从而提供统一的 addEvent() 调用接口。
这种封装方式能够简化开发流程，提升代码的可维护性。
接下来我们将详细分析其实现原理。
/**
* 将监听器注册到指定元素
* @param {Object} node 需要添加事件的目标节点
* @param {Object} type 事件类型字符串
* @param {Object} listener 事件处理函数
*/
addEvent 函数核心实现
function addEvent( node, type, listener ) {
// 调用前置方法检查节点有效性，确保兼容性和平稳退化
if(!(node = $(node))) return false;
if(node.attachEvent) { // 针对 IE 浏览器的处理逻辑
node['e'+type+listener] = listener;
node[type+listener] = function(){node['e'+type+listener]( window.event );}
node.attachEvent( 'on'+type, node[type+listener] );
return true;
}else if (node.addEventListener) {
// 针对支持标准 DOM 的浏览器处理逻辑
node.addEventListener( type, listener, false );
return true;
}
// 若两种方法均不支持，则返回 false
return false;
};
};
全局挂载与使用示例
// 将函数挂载到全局命名空间
window['liujingning']['addEvent'] = addEvent;
使用方法示例：
例如，为页面的 onload 事件添加监听器，代码如下：
liujingning.addEvent(window,'load',function(Event) { // 在此处编写具体业务代码})
同样，也可以为特定 ID 的元素添加事件：