JS事件处理程序的几种方法

2024-07-04 08:30| 来源: 网络整理| 查看: 265

四.IE事件处理程序中有类似与DOM2级事件处理程序的两个方法：

1.attachEvent()

2.detachEvent()

它们都接收两个参数：

1.事件处理程序名称。如onclick、onmouseover，注意：这里不是事件，而是事件处理程序的名称，所以有on。

2.事件处理程序函数。如function(){alert("clicked");}

之所以没有和DOM2级事件处理程序中类似的第三个参数，是因为IE8及更早版本只支持冒泡事件流。

注意：

1.IE事件处理程序中attachEvent()的事件处理程序的作用域和DOM0与DOM2不同，她的作用域是在全局作用域中。因此，不同于DOM0和DOM2中this指向元素，IE中的this指向window。

2.同样，我们可以使用attachEvent()来给同一个元素添加多个事件处理程序。但是与DOM2不同，事件触发的顺序不是添加的顺序而是添加顺序的相反顺序。

3.同样地，通过attachEvent()添加的事件处理程序必须通过detachEvent()方法移除，同样的，不能使用匿名函数。

4.支持IE事件处理程序的浏览器不只有IE浏览器，还有Opera浏览器。

第五部分：跨浏览器的事件处理程序

这一部分需要创建两个方法：

addHandler() --这个方法职责是视情况来使用DOM0级、DOM2级、IE事件处理程序来添加事件。removeHandler()--这个方法就是移除使用addHandler添加的事件。

这两个方法接收相同的三个参数：

1.要操作的元素--通过dom方法获取

2.事件名称--注意：没有on，如click、mouseover 3.事件处理程序函数--即handler函数

这两个方法的构造情况如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 var EventUtil={ addHandler: function (element,type,handler){ if (element.addEventListener){ element.addEventListener(type,handler, false ); //注意：这里默认使用了false（冒泡） } else if (element.attachEvent){ element.attachEvent( "on" +type,handler); } else { element[ "on" +type]=handler; } }, removeHandler: function (element,type,handler){ if (element.removeEventListener){ element.removeEventListener(type,handler, false ); //注意：这里默认使用了false（冒泡） } else if (element.detachEvent){ element.detachEvent( "on" +type,handler); } else { element[ "on" +type]= null ; } } };

即先判断DOM2级事件处理程序，再判断IE事件处理程序，最后使用DOM0级事件处理程序。

【本文地址】

公司简介

联系我们