DOM事件处理程序

Posted 2020-09-01 剑阁王者

addEventListener() 和 removeEventListener()，

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

1. 要处 理的事件名、
2. 作为事件处理程序的函数
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个参数

1. 事件处理程序名称
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!");
});