addEventListener():
在除IE8及之前的版本外所有的浏览器都支持标准的事件模型中,任何能成为事件目标的对象—这些对象包括Window对象、docum对象和所有的文档元素—都定义了一个名叫addEventListener()的方法,使用这个方法可以为事件目标注册事件处理程序。
addEventListener()接受三个参数。第一个是要注册处理程序的事件类型这个事件类型(或名称)是个字符串,但他不应该包括用于设置事件处理程序属性的前缀“on”。第二个参数是当前事件发生时要调用的函数。最后一个参数是一个布尔值(通常情况下这个值为false,如果设置为true函数将注册为捕获事件,并在事件不同的阶段调用)。addEventListener()方法只会注册一次事件。
示例:在button元素上注册click事件:
<button id="btn">click me</button>
<script>
var b=document.getElementById('btn');
b.onclick=function(){alert(" you have clicked me");};
b.addEventListener("clicl",function(){alert("hello click");},false);
</script>
相对于addEventListener()的是removeEventListener();它同样有三个参数,从对象中删除事件处理程序,常用于临时注册事件处理程序,然后不久就删除。
示例:需要mousedown()事件时,给mouseover和mouseup事件注册临时捕获事件处理程序用来处理用户是否拖动鼠标。
document.removeEventListener("mouseover",handleMouseover,true);
document.removeEventListener("mouseup",handleMouseup,true);
attachEvent():
IE9之前的IE不支持addEventListener()和removeEventListener()。IE5以后版本定义了类似的方法:attachEvent()和detachEvent().
attachEvent()和detachEvent()的工作原理类似,不同的是:
- 因为IE事件模型不支持事件捕获,所以attachEvent()和detachEvent()只有两个参数:事件类型和处理程序函数。
- IE的方法第一个参数带“on”前缀。
- attachEvent()允许相同的事件处理程序函数注册多次,当事件执行时,执行次数与注册次数相同。
所以当浏览器不支持addEventListener()时,使用attachEvent()
var b=document.getElementById('btn');
var handler=function(){alert("hello");};
if(b.addEventListener){
b.addEventListener("click",handler,false);
}else{
b.attachEvent("onclick",handler);
}