首页 > 代码库 > DOM事件处理程序

DOM事件处理程序

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!");
}); 

 

DOM事件处理程序