JS入门

attachEvent()与detachEvent()

字号+ 作者: 来源: 2014-11-16 22:15 我要评论( )

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()可以使用相同的函数来移除事件处理程序。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 使用javascript生成的植物显示过程特效

    使用javascript生成的植物显示过程特效

    2015-06-06 16:26

  • javascript 杂谈之哪种写法你更喜欢?

    javascript 杂谈之哪种写法你更喜欢?

    2014-11-16 22:15

  • 面向对象的JavaScript

    面向对象的JavaScript

    2014-11-16 22:15

  • Javascript模板引擎性能对比及几点优化

    Javascript模板引擎性能对比及几点优化

    2014-11-16 22:15

网友点评