addEventListener() 和 attachEvent()

落日映苍穹つ 2022-06-18 11:20 205阅读 0赞

**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()***