IE中实现了与DOM中用于处理指定和删除事件处理程序操作类似的两个方法:attachEvent()和detachEvent()。这两个方法接受相同的两个参数:事件处理程序名称与事件处理程序函数。由于IE只支持事件冒泡,所以同各国attachEvent()添加的事件处理程序都会被添加到冒泡阶段。
要使用attachEvent()为按钮添加一个事件处理程序,可以使用以下代码:
var btn = document.getElementById("myBtn"); btn.attachEvent("onclick", function () { alert("Clicked") });
注意,attachEvent()第一个参数是“onclick”,而非DOM的addEventListener()方法中的“Click”。
在IE中使用attachEvent()与使用DOM0级方法的主要区别在于事件处理程序的作用域。在使用DOM0级方法的情况下,事件处理程序会在其所属元素的作用域内运行;在使用attachEvent()方法的情况下,事件处理程序会在全局作用域中运行,因此this等于window。来看下面的例子:
var btn = document.getElementById("myBtn"); btn.attachEvent("onclick", function () { alert(this == window); //ture })
在编写跨浏览器的代码时,牢记这一区别非常重要。
与addEventListener()类似,attachEvent()方法可以用来为一个元素添加多个事件处理程序。来看下面的例子:
var btn = document.getElementById("myBtn"); btn.attachEvent("onclick", function () { alert("Clicked"); }); btn.attachEvent("onclick", function () { alert("Hello World!") });
使用attachEvent()添加事件可以通过detachEvent()来移除,条件是必须提供相同的参数。与DOM方法一样,这也意味着添加的匿名函数将不能被移除。不过,只要能够将相对相同函数的引用传给detachEvent(),就可以移除相应的事件处理程序。例如:
var btn = document.getElementById("myBtn"); var handler = function () { alert("Clicked"); } btn.attachEvent("onclick", handler); btn.detachEvent("onclick", handler);
这个例子将保存在变量handler中的函数作为事件处理程序。因此,后面的detachEvent()可以使用相同的函数来移除事件处理程序。