区别在与:
attactEvent不支持Mozilla,addEventListener用于Mozilla。
attactEvent方法,按钮为onclick;
addEventListener方法,按钮为click;
两者都可对执行的优先级不一样的事件进行操作。
例如:
document.getElementById("btn").οnclick=method1;
document.getElementById("btn").οnclick=method2;
document.getElementById("btn").οnclick=method3;
这样子的写法,method3覆盖了method1与method2,因此浏览器只会执行method3。
为了让三个事件都顺利运行,就需要使用attactEvent(event,function)的写法。
例:
var aBtn=document.getElementById("btn");
aBtn.attactElent("onclick",method1);
aBtn.attactEvent("onclick",method2);
aBtn.attactEvent("onclick",method3);
用这样的写法,可以使三个事件顺利运行,但是执行的顺序是method3>method2>method1;
而且如果是Mozilla系列,则不支持此方法,需要用到addEventListener(type,listener,useCaptrue);
写法如下:
var aBtn=document.getElementById("btn");
aBtn.addEventListener("click",method1,false);
aBtn.addEventListener("click",method2,false);
aBtn.addEventListener("click",method3,false);
这种写法可以顺利的在Mozilla运行,运行的顺序为method1>method2>method3;
实例:
<!DOCTYPE HTML>
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div style="height:200px;width:200px;background-color:skyblue" id="div"></div>
<script>
var method1=function(){
alert(1)
},
method2=function(){
alert(2)
},
method3=function(){
alert(3)
},
aDiv=document.getElementById("div")
if(aDiv.addEventListener){
aDiv.addEventListener("click",method1,false);
aDiv.addEventListener("click",method2,false);
aDiv.addEventListener("click",method3,false)
}else if(aDiv.attachEvent){
aDiv.attachEvent("onclick",method1);
aDiv.attachEvent("onclick",method2);
aDiv.attachEvent("onclick",method3);
}
</script>
</body>
</html>
移除事件为:
detachEvent(event,function);
removeEventListener(type,listener)