JavaScript 兼容 IE 与标准浏览器的 addEvent 封装实现

跨浏览器事件绑定封装思路

对于支持 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 的元素添加事件：