首页 > 其他 > 详细

事件处理程序

时间:2018-10-12 01:14:27      阅读:64      评论:0      收藏:0      [点我收藏+]

标签:.get   等于   remove   col   删除   注意   更换   解析   ner   

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()移除,条件是必须提供相同的参数

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

 

事件处理程序

标签:.get   等于   remove   col   删除   注意   更换   解析   ner   

原文:https://www.cnblogs.com/aizzz/p/9775636.html

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号