近日遇到attachEvent与addEventListener两个事件,哟,果断研究一下~~

先普及一下基本知识:

attachEventaddEventListener的作用:为某一事件附加其它的处理事件。

 

网上普遍都是说attachEvent用于非Mozilla系列


addEventListener用于Mozilla系列。


(Mozilla系列在浏览器而言,即指火狐浏览器,本人认为也可以指支持w3c标准的系列浏览器)

理论上是这么说,还是得自己动手试一试!

结合查阅资料写了以下代码进行测试:


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>attachEvent与addEventListener区别</title>
<style type="text/css">

</style>
</head>

<body>
<button id="btn1">点我</button>

</body>
<script type="text/javascript">
var btn1Obj = document.getElementById("btn1");

function method1(){
alert("method1");
}
function method2(){
alert("method2");
}
function method3(){
alert("method3");
}
function attachEventListen(obj,e,fun){
/*obj.attachEvent ? obj.attachEvent("on"+e,fun) : obj.addEventListener(e,fun,false);*/
obj.attachEvent("on"+e,fun);//测试浏览器,发现:firefox、chrome、IE9、IE10、IE11、safari、opera都不兼容,IE7、IE8兼容,
//obj.addEventListener(e,fun,false);//测试浏览器,发现:firefox、chrome、IE、safari、opera都兼容,IE7、IE8不兼容,

}

attachEventListen(btn1Obj,"click",method1);
attachEventListen(btn1Obj,"click",method2);
attachEventListen(btn1Obj,"click",method3);

</script>
</html>


var Getid = function(id){
return document.getElementById(id)
}
var addEvent = function(obj,event,fun){
if (obj.addEventListener){
obj.addEventListener(event,fun,false)
} else if(obj.attachEvent()){
obj.attachEvent("on"+event,fun)
}
}

 


运行结果注释在了上面代码中。(只测试了主流浏览器:IE7-11、firefox、chrome、opera、safari)

总结起来就是:

attachEvent——兼容:IE7、IE8;不兼容firefox、chrome、IE9、IE10、IE11、safari、opera

addEventListener——兼容:firefox、chrome、IE、safari、opera;不兼容IE7、IE8

 

由此也可以看出,从IE9开始,很多JS也已经按照W3c的标准;其他主流浏览器也在向W3c标准看齐。