javascript事件处理程序绑定

最近阅读《javascript高级程序设计》一书，看到了事件处理程序这一章，觉得这章内容非常重要，所以做了总结。

 

指定事件处理程序的方法：

1、为HTML元素的属性赋值，如

<input type="button" value="click me" onclick="alert('clicked')"/>

 

2、DOM0级事件处理程序

var btn = document.getElementById("mybtn");

btn.onclick = function(){alert("clicked");}

只支持一个事件处理程序

 

3、DOM2级事件处理程序（好像没有DOM1级）

var btn = document.getElementById("mybtn");

btn.addEventListener("click",function(){alert(this.id)},false); //false表示在事件冒泡阶段调用事件处理程序，true表示在事件捕获阶段调用

DOM2级方法可以为元素添加多个事件处理函数，如：

btn.addEventListener("click",function(){alert('hello');},false);

 

移除事件处理函数需要通过removeEventListener()，将函数名代入即可，因为匿名函数没有函数名，因此无法移除匿名函数，如下：

btn.removeEventListener("click",function(){alert(this.id);},false); //不能移除

但通过以下方法可以移除：

var handler = function(){alert(this.id);};

btn.addEventListener("click",handler,false);

btn.removeEventListener("click",handler,false); //有效

 

IE中添加和移除事件处理函数所用的方法不同，对应的是attachEvent()和detachEvent()函数

var btn = document.getElemntById("mybtn");

btn.attachEvent("onclick",function(){alert('clicked');});

注意，第一个参数是"onclick"，不是"click"

 

下面说说addEventListener和attachEvent的区别：

1、如上所述，第一个参数不同。

2、事件处理函数触发顺序不同，如下代码：

var btn= document.getElementById("mybtn");

btn.attachEvent("onclick",function(){alert('clicked');});

btn.attachEvent("onclick",function(){alert('hello');});

当事件发生时，如果是用addEventListener()函数添加，打印的顺序应该为'clicked','hello'；如果是用attachEvent()函数添加，打印的顺序相反，是'hello','clicked'

3、事件处理程序作用域不同，即this指向不同

addEventListener()绑定的事件处理函数，this指向的是绑定函数的元素

attachEvent()绑定的事件处理函数，this指向的是window

4、attachEvent不需要指定是否冒泡，因为它只支持冒泡

 

为了能够实现跨浏览器的事件处理程序，可以使用以下代码：