首页 > 代码库 > js绑定事件方法：addEventListener与attachEvent的不同浏览器的兼容性写法
js绑定事件方法：addEventListener与attachEvent的不同浏览器的兼容性写法
js的事件绑定方法中，ie仅仅支持attachEvent,而FF和Chrome仅仅支持addEventListener，所以就必须为这两个方法做兼容处理，原理是先推断attachEvent仅仅否为真（存在），假设为真则用attachEvent（）方法。否则的话就用addEventListener（）。
另外，为了避免每次绑定事件时都要做推断。能够封装一个函数myAddEvent(obj,ev,fn){}。
代码例如以下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>绑定</title>
<script>
window.onload = function()
{
var oBtn = document.getElementById("btn1");
//IE attachEvent(事件名。函数)，此方法仅仅有ie支持，FF和Chrome均不支持
/*oBtn.attachEvent("onclick",function()
{
alert("a");
});
oBtn.attachEvent("onclick",function()
{
alert("b");
})*/
//FF和Chrome addEventListener(事件名。函数)，此方法ie不支持
/*oBtn.addEventListener("click",function()
{
alert("a");
});
oBtn.addEventListener("click",function()
{
alert("b");
})*/
//兼容写法：if/else推断
/*if(oBtn.attachEvent)
{
oBtn.attachEvent("onclick",function()
{
alert("a");
});
oBtn.attachEvent("onclick",function()
{
alert("b");
})
}
else
{
oBtn.addEventListener("click",function()
{
alert("a");
},false);
oBtn.addEventListener("click",function()
{
alert("b");
},false)
}*/
//另外，还能够把这个兼容写法封装成一个函数，这样就不用每次绑定事件时都要推断一下
function myAddEvent(obj,ev,fn) //obj为要绑定事件的元素。ev为要绑定的事件，fn为绑定事件的函数
{
if(obj.attachEvent)
{
obj.attachEvent("on" + ev,fn);
}
else
{
obj.addEventListener(ev,fn,false);
}
}
myAddEvent(oBtn,"click",function()
{
alert("a");
})
myAddEvent(oBtn,"click",function()
{
alert("b");
})
}
</script>
</head>
<body>
<input id="btn1" type="button" value="http://www.mamicode.com/按钮"/>
</body>
</html>
js绑定事件方法：addEventListener与attachEvent的不同浏览器的兼容性写法
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。