JavaScirpt中的事件处理程序

事件处理在JS中可谓是点睛一笔，JS的事件处理程序使得JS成为了网页交互层的第一把交椅。那么，JS中有几种事件处理程序呢？

1.DOM0级事件处理程序

经过JS指定事件处理程序的传统方式，就是将一个函数添加给一个对象的事件处理程序。这种方式为现代全部的浏览器所用。缘由一是方便简单，缘由二是能够实现跨浏览器。

1     var oA = document.getElementsByTagName("a")[0]; 2         oA.onclick = function(){ 3             alert(this.id); 4 
5     }    

咱们经过一个doucment对象获取到一个A标签的引用，而后在这个引用上添加onclick事件，可是有一点须要注意，添加事件那一段代码若是没有执行，就不会指定事件处理程序，因此，代码要在页面中的a标签以后。

删除事件处理程序能够经过一个空引用：

1 oA.onclick = null;

2.DOM2级事件处理程序

在“DOM2级事件”中定义了二个方法用来添加或者移除事件处理程序：

1.addEventListener();

2.removeEventListener();

这两个方法的参数是同样的，第一个是要添加的事件类型，第二个是事件处理程序的函数名（若是用的是匿名函数，则没法移除），第三个是一个布尔值，true表明在事件捕获时期就添加该事件处理程序，false表明在事件冒泡时期添加该事件处理程序，通常都用false。兼容性的话，IE9+，Firefox，Safari，Chrome，和Opera支持DOM2级事件处理程序。

1     oA.addEventListener("click",handle,false); 2     oB.addEventListener("click",handle,false); 3 
4     var handle = function(){ 5         alert(this.id); 6  } 7     
8     oA.removeEventListener("click",handle,false); 9     oB.removeEventListener("click",handle,false);

在这段代码中，分别给oA和oB对象添加了click事件，在运行的时候，会先弹出oA的id，而后才是oB的id，这两个事件处理程序会按他们本身的顺序去执行。注意，这里是click事件，没有on

3.IE事件处理程序

在IE中实西现了和DOM中相似的两个方法：

1.attachEvent();

2.detachEvent();

这两个方法接受同样的参数，第一个是事件名，第二个是事件处理程序函数，用这两个方法会默认在事件冒泡中添加事件处理程序。

1     oA.attachEvent("onclick",handle); 2     oB.attachEvent("onclick",handle); 3 
4     var handle = function(){ 5         alert(this.id); 6  } 7 
8     oA.detachEvent("onclick",handle); 9     oB.detachEvent("onclick",handle);

使用这两个函数须要注意一下几点：

1.第一个参数是带on的，即onclick，这点不一样于DOM2级的两个方法。

2.做用域是不一样的，这里的this，不一样于DOM0级的做用域。在IE中的事件处理程序，会在全局做用域下运行，也就是说这里的this再也不表明事件添加的对象，而是一直表明着window对象。

3.顺序也不一样与DOM方法，这里是会先执行第二句，而后再执行第一句，和DOM2级中的顺序是相反的，是反过来执行的。

4.一样的，匿名函数不能移除事件，最好用有名字的函数。

目前支持IE事件处理程序的浏览器有IE和Opera。

 

 

• DOM0级事件处理程序
• DOM2级事件处理程序
• IE事件处理程序