JS动态添加事件在IE与Firefox中的兼容处理

动态添加事件与属性

在易搜项目的搜索分类功能中，分类列表是通过JavaScript动态生成的。对于每个生成的元素，需要动态添加属性和事件。其中，添加属性可以直接赋值，这种方式在IE和Firefox浏览器中均适用，例如：

var element = document.createElement('select');

element.id = "myselect";

上述代码在IE和Firefox中执行效果一致且运行正常。然而，对于动态创建的元素，通常需要绑定事件。不能像添加属性那样直接通过点语法后跟事件名和代码，否则会导致报错。因此，需要采用特定的方法来添加事件：

浏览器类型判断

首先，需要判断当前使用的浏览器类型。沿用之前的变量定义：

if( element.attachEvent ){

//为IE以及IE内核的浏览器（1）

}else if( element.addEventListener){

//为FF以及NS内核的浏览器（2）

   }

上述if语句块用于判断当前浏览器是IE还是Firefox。

事件注册与兼容处理

确定浏览器类型后，需要将函数注册到元素中。下面定义一个功能函数：

function showElementId(elmt){

alert(elmt.id);

   }

该函数功能简单，即弹出提示框显示参数中元素的ID。

如果是IE浏览器，将以下代码插入到上述注释（1）处：

element.attachEvent( "onclick",function(){showElementId(elmt)});

如果是Firefox浏览器，将以下代码插入到上述注释（2）处：

var eventName = "onclick".replace(/on(.*)/i,'$1'); element.addEventListener( eventName,function(){showElementId(elmt)},false);

因为在Firefox中注册事件时，事件名称不需要前缀“on”，所以需要将其替换掉。

今后在开发项目中，若需通过JS动态为元素添加事件，可采用上述方法。这样可以避免用户在Firefox浏览器中无法使用已开发的功能。