JavaScript 动态添加事件：setAttribute、attachEvent 与 addEventListener 对比

使用 setAttribute 动态绑定事件

首先获取目标元素对象，例如：var obj = document.getElementById("obj");

通过setAttribute方法为元素设置onclick属性，代码如下：obj.setAttribute("onclick", "javascript:alert('测试');");

这种方法利用setAttribute指定onclick属性，实现简单且易于理解。

然而，该方法在IE浏览器中存在兼容性问题。IE并非不支持setAttribute函数本身，而是不支持通过setAttribute设置某些特定属性，包括对象属性、集合属性和事件属性。因此，在IE中使用setAttribute设置style、onclick或onmouseover等属性无法生效。

IE 与标准浏览器的事件绑定方法

针对IE浏览器，可以使用attachEvent方法来绑定事件。

具体用法为：obj.attachEvent("onclick", Foo);

定义事件处理函数Foo如下：

alert("测试");

也可以将函数定义与事件绑定合并书写。

示例代码为：obj.attachEvent("onclick", function(){alert("测试");});

对于其他标准浏览器，推荐使用addEventListener方法。

使用方式为：obj.addEventListener("click", Foo, false);

同样需要定义事件处理函数Foo：

alert("测试");

该函数定义也可与事件绑定合并书写。

示例代码为：obj.addEventListener("click", function(){alert("测试");}, false);

需要注意，attachEvent的事件名称带有on前缀（如onclick），而addEventListener的事件名称不带on前缀（如click）。

此外，addEventListener的第三个参数useCapture用于控制事件捕获阶段。若设为true，表示启动捕获模式，即指定类型的事件会在 bubbling（冒泡）阶段之前，先触发注册在树中其下方所有EventTargets上的已注册EventListener。正在通过树向上冒泡的事件不会触发使用捕获模式的EventListener。

多浏览器兼容的综合应用方案

以下是综合应用多种方法的示例。

代码逻辑如下：if (window.attachEvent)

//IE 的事件代码

else

//其它浏览器的事件代码

直接赋值方式及其局限性

另一种常见做法是直接赋值：obj.onclick = Foo;

这种方法在多个浏览器中均得到支持，属于较旧的规范（上述方法二属于DOM2规范）。尽管较新，但由于使用便捷，应用场景依然广泛。

兼容多浏览器的替代解决方案

以下是笔者提出的一种解决方案。

定义show函数如下：

alert("Hello, world!!!");

核心代码为：obj.setAttribute('onclick',document.all ? eval(function(){show()}) : 'javascript:show()');

该方案看起来简单且兼容浏览器，但可能存在其他未知影响，或者是否有更优的替代方法仍有待探讨。