事件处理程序

Posted 2021-01-12 aizzz

1.html事件处理程序

<input type="button" value="Click Me" onclick="showMessage()">

事件处理程序中的代码在执行时，有权访问全局作用域中的任何代码

缺点：

（1）存在时差问题，假设showMessage()函数在页面最底部定义，如果用户在页面解析之前就单击了按钮，就会引起错误

（2）HTML与JS代码紧紧耦合，如果要更换事件处理程序，就要修改两个地方

 

2.DOM0级事件处理程序

var btn = document.getElementById("myBtn");

btn.onclick = function(){

　　alert(this.id); // "myBtn"

}

这时候事件处理程序是在元素的作用域中运行

在事件冒泡阶段被处理，

btn.onclick = null;  // 删除事件处理程序

 

3.DOM2级事件处理程序

用于处理指定和删除事件处理程序的操作：

addEventListener() 和 removeEventListener()

接收三个参数，要处理的事件名、作为事件处理程序的函数和一个boolean值

最后一个boolean值如果是true，表示在捕获阶段调用事件处理程序

如果是false，表示在冒泡阶段调用事件处理程序

var btn = document.getElementById("myBtn");

btn.addEventListener("click",function(){

　　alert(this.id);

}, false);

与DOM0级一样，这里添加的事件处理程序也是在其依附的元素的作用域里运行

使用DOM2级方法添加事件处理程序的主要好处是可以添加多个事件处理程序，会按添加顺序触发

通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除；

移除时传入的参数与添加处理程序时使用的参数相同。

这也意味着通过addEventListener()添加的匿名函数将无法移除

 

4.IE事件处理程序

var btn = document.getElementById("myBtn");

btn.attachEvent("onclick", function(){

　　alert("Clicked");

});

注意IE中attachEvent()第一个参数是"onclick"，而非DOM2中的"click"

在IE中使用attachEvent()与使用DOM0级方法的主要区别在于事件处理程序的作用域。

在使用DOM0级方法的情况下，事件处理程序会在其所属元素的作用域内运行；

在使用attachEvent()方法的情况下，事件处理程序会在全局作用域内运行，因此this等于window

IE添加多个事件处理程序时，处理顺序和DOM2相反，

使用attachEvent()添加的事件可以通过detachEvent()移除，条件是必须提供相同的参数

这也意味着添加的匿名函数不能被移除