JavaScirpt中的事件处理程序

Posted 2020-10-07

事件处理在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事件处理程序