DOM事件处理程序

最新推荐文章于 2022-08-24 20:27:32 发布

weixin_33857230

最新推荐文章于 2022-08-24 20:27:32 发布

阅读量43

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/jgwz/p/6431133.html

本文详细介绍了DOM中的addEventListener()和removeEventListener()方法的使用方式及注意事项，包括如何在捕获和冒泡阶段调用事件处理程序。同时对比了IE中attachEvent()和detachEvent()的方法及其与DOM0级方法的区别。

addEventListener() 和 removeEventListener()，

所有 DOM 节点中都包含这两个方法，并且它们都接受 3 个参数：

要处理的事件名、
作为事件处理程序的函数
一个布尔值。最后这个布尔值参数如果是 true，表示在捕获阶段调用事件处理程序；如果是 false，表示在冒泡阶段调用事件处理程序。

var btn = document.getElementById("myBtn");
var handler = function(){
 alert(this.id);
};
btn.addEventListener("click", handler, false);
//这里省略了其他代码
btn.removeEventListener("click", handler, false); //有效！

添加的事件处理程序是在其依附的元素的作用域中运行

可以添加多个事件，按顺序先后触发。

第二个参数不可用匿名函数，不然两个方法指向不是同一个函数，传入 removeEventListener()中的事件处理程序函数必须与传入 addEventListener()中的相同

IE中的事件处理程序 attachEvent()和 detachEvent()，接收2个参数

事件处理程序名称
事件处理程序函数

在 IE 中使用 attachEvent()与使用 DOM0 级方法的主要区别在于事件处理程序的作用域。在使用 DOM0 级方法的情况下，事件处理程序会在其所属元素的作用域内运行；在使用 attachEvent()方法的情况下，事件处理程序会在全局作用域中运行，因此 this 等于 window。

var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function(){
 alert(this === window); //true
});

与 DOM 方法不同的是，这些事件处理程序不是以添加它们的顺序执行，而是以相反的顺序被触发，先输出Hello world！在输出clicked

var btn = document.getElementById("myBtn");
btn.attachEvent("onclick", function(){
 alert("Clicked");
});
btn.attachEvent("onclick", function(){
 alert("Hello world!");
});

转载于:https://www.cnblogs.com/jgwz/p/6431133.html