使用原生javascript绑定事件的各浏览器兼容版本

发布时间：2011年1月7日 / 分类：JavaScript / 11,691 次浏览 / 评论

在CSDN上看到一个帖子，通过属性设置DOM对象的事件在IE6下没有作用，于是在google上搜了下，得知IE6绑定事件有些差异。

对于各个浏览器的差异，可以看这篇文章：
http://blog.chinaunix.net/u1/54739/showart_432024.html

还好找到一个兼容的函数，做了一个简单的测试，特分享如下：

在页面上有一个Add按钮，点击按钮触发函数?addFile，添加一个文件选择框到页面，每个文件选择框附带一个移除按钮，点击移除按钮就可以删除这个文件选择框。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
var btnID = 1;
function addFile() {
var div = document.createElement("div");
var f = document.createElement("input");
f.setAttribute("type", "file")
f.setAttribute("name", "File")
f.setAttribute("size", "50")
div.appendChild(f)
var d = document.createElement("input"); //绑定onclick删除
d.setAttribute("type", "button")
d.setAttribute("id", "deteFileBtn_" + btnID);
d.setAttribute("value", "移除")
div.appendChild(d)
document.getElementById("_container").appendChild(div);

var args = new Object();
args.id = "deteFileBtn_" + btnID;
AttachEvent(document.getElementById("deteFileBtn_" + btnID), "click", deteFile, args);

btnID++;
}
//删除选中
function deteFile() {
var o = document.getElementById(this.id);
while (o.tagName != "DIV") o = o.parentNode;
o.parentNode.removeChild(o);
}

function AttachEvent(target, eventName, handler, argsObject) {
var eventHandler = handler;
if (argsObject) {
eventHander = function (e) {
handler.call(argsObject, e);
}
}
if (window.attachEvent)//IE
target.attachEvent("on" + eventName, eventHander);
else//FF
target.addEventListener(eventName, eventHander, false);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="Button1" type="button" value="Add" onclick="addFile()" />
<div id="_container">
</div>
</div>
</form>
</body>
</html>

兼容函数： AttachEvent，兼容IE5.5，IE6，IE7，IE8，Opera，Firefox，Chrome等

有四个参数：

target 要绑定事件的DOM对象

eventName 要绑定的事件名称，事件前边不要加“on”

handler 要触发的函数

argsObject ?函数中使用的参数

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自波斯马，原文地址《使用原生javascript绑定事件的各浏览器兼容版本》

关键字: 绑定事件