当前位置: 首页 > 编程笔记 >

深入理解在JS中通过四种设置事件处理程序的方法

燕英逸
2023-03-14
本文向大家介绍深入理解在JS中通过四种设置事件处理程序的方法,包括了深入理解在JS中通过四种设置事件处理程序的方法的使用技巧和注意事项,需要的朋友参考一下

所有的JavaScript事件处理程序的作用域是在其定义时的作用域而非调用时的作用域中执行,并且它们能存取那个作用域中的任何一个本地变量。但是HTML标签属性注册处理程序就是一个例外。看下面四种方式:

第一种方式(HTML标签属性):

<input type="button" id="btn1" value="测试" onclick="alert(this.id);" />

上面的代码是通过设置HTML标签属性为给button 添加了点击事件,当点击button 按钮时会弹出这个button的id,即btn1。

这种通过HTML属性来注册事件处理程序是一个例外。它们被转换为能存取全局变量的顶级函数而非任何本地变量。由于历史的原因,它们运行在一个修改后的作用域链中。通过HTML属性定义的事件处理程序能像本地变量一样使用目标对象、容器对象(form)对象和document对象的属性。它会被浏览器转换为类似如下的代码:

 function (event){
  with(document){
   with(this.form||{}){
    with(this){
     /*具体的事件处理代码*/
    }
   }
  }  
}

关于with的用法,可以自行查阅,这里后面有文章讲解。读者先自行了解一下。提供一个连接(https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/with)

这种方式现在已经不推荐使用。

第二种方式(调用函数)

<input type="button" id="btn2" value="测试" onclick="test()" />
<script type="text/javascript">
  function test(){
   alert(this.id);
  }
</script>

这段代码弹出来的是undefined。

这种设置方式是通过调用全局函数来进行的,这时this指向的是window,而非这个button的调用者,可以通过输出console.log(this==window);来进行验证

第三种方式(调用函数)

<input type="button" id="btn3" value="测试" />
<script type="text/javascript">
   var btn3 = document.getElementById("btn3");
        btn3.onclick = function () {
          alert(this.id);
        };
</script>

这段代码弹出来的是btn3。

这种事件处理程序在事件目标上定义,所以它们作为这个对象的方法来调用(但是下面在IE里面有个例外)。这就是说在事件处理程序内,this关键字指的是事件目标。

当使用addEventListener()注册时,调用的处理程序使用事件目标作为它们的this值。但是对于还用attachment()注册的处理程序作为函数调用,它们的this值是全局(window)对象。就是说的第四中方式

第四种方式(通过addEventListener和attachment):

<input type="button" id="btn3" value="测试" onclick="test()" />
 var btn = document.getElementById("btn3");
        var handler = function () { console.log(this.id); };
        if (btn.addEventListener) {
          console.log("addEventListener");
          btn.addEventListener("click", handler, false);
        }
        else if (btn.attachEvent) {//IE9之前的版本
          console.log("attachEvent");
          btn.attachEvent("onclick",handler);
        }

在IE5-IE8 版本输出的是undefined。(此时调用的是attachement)

IE9以后的版本输出的btn3.(修复了上面的问题,增加了通用的addEventListener)。

如果想修复IE5-8里面的那个问题,可以使用下面的方法。

/*
*target:目标对象,button之类的
*type:"click"字符串事件名称,无需带on
*handler:调用的处理程序
*/
function addEvent(target,type,handler){
 if (target.addEventListener) {
          target.addEventListener(type, handler, false);
        }
        else if (target.attachEvent) {//IE9之前的版本          
          btn.attachEvent("on"+type,function(event){
            return hanlder.call(target,event);//把处理程序作为事件目标的方法调用,更改this指向。
          });
        }
}

以上所述是小编给大家介绍的在JS中通过四种设置事件处理程序的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持!

 类似资料:
  • 本文向大家介绍深入理解jQuery 事件处理,包括了深入理解jQuery 事件处理的使用技巧和注意事项,需要的朋友参考一下 浏览器的事件模型 DOM第0级事件模型 1.Event实例 他的属性提供了关于当前正被处理的已触发事件的大量信息。这包括一些细节,比如在哪个元素上触发的事件、鼠标事件的坐标以及键盘事件中单击了哪个键。 2.事件冒泡 当触发 dom 树中一个元素上的事件时,事件模型会检查这个元

  • 本文向大家介绍深入解析C++程序中激发事件和COM中的事件处理,包括了深入解析C++程序中激发事件和COM中的事件处理的使用技巧和注意事项,需要的朋友参考一下 本机 C++ 中的事件处理 在处理本机 C ++ 事件时,您分别使用 event_source 和 event_receiver 特性设置事件源和事件接收器,并指定 type=native。这些特性允许应用它们的类在本机的非 COM 上下文

  • 问题内容: 让我开始关注消息队列和Redis MQ (出色的框架)。 我了解您必须使用.RegisterHandler(…)确定哪个处理程序将处理消息队列中的消息/事件的类型。 因此,如果我有EventA,EventB等,我应该有一个服务来处理每个这些事件,例如: 因此,这些应该只是创建的队列/ redis列表? 另外,如果我希望发生一系列事件,例如EventA类型的消息也具有一个处理程序,该处理

  • 本文向大家介绍一起深入理解js中的事件对象,包括了一起深入理解js中的事件对象的使用技巧和注意事项,需要的朋友参考一下 我们知道在JS中常用的事件有: 页面事件:load; 焦点事件:focus,blur; 鼠标事件:click,mouseout,mouseover,mousemove等; 键盘事件:keydown,keyup,keypress; form表单事件:reset,submit; 内容

  • 本文向大家介绍深入理解JS的事件绑定、事件流模型,包括了深入理解JS的事件绑定、事件流模型的使用技巧和注意事项,需要的朋友参考一下  一、JS事件 (一)JS事件分类 1.鼠标事件: click/dbclick/mouseover/mouseout 2.HTML事件:  onload/onunload/onsubmit/onresize/onchange/onfoucs/onscroll 3.键盘