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


Posted in Javascript onMarch 02, 2017

所有的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中通过四种设置事件处理程序的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
ExtJS Grid使用SimpleStore、多选框的方法
Nov 20 Javascript
javascript简易缓动插件(源码打包)
Feb 16 Javascript
JavaScript中Null与Undefined的区别解析
Jun 30 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
Aug 23 Javascript
每天一篇javascript学习小结(RegExp对象)
Nov 17 Javascript
jquery ajax双击div可直接修改div中的内容
Mar 04 Javascript
jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)
Apr 16 Javascript
学习Node.js模块机制
Oct 17 Javascript
VUE 3D轮播图封装实现方法
Jul 03 Javascript
element-ui 上传图片后清空图片显示的实例
Sep 04 Javascript
原生js实现each方法实例代码详解
May 27 Javascript
微信小程序国际化探索实现(附源码地址)
May 20 Javascript
JavaScript表单验证完美代码
Mar 02 #Javascript
js实现常见的工具条效果
Mar 02 #Javascript
详谈jQuery unbind 删除绑定事件 / 移除标签方法
Mar 02 #Javascript
jQuery给表格添加分页效果
Mar 02 #Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
Mar 02 #Javascript
Bootstrap Scrollspy源码学习
Mar 02 #Javascript
老生常谈jquery中detach()和remove()的区别
Mar 02 #Javascript
You might like
基于OpenCV的PHP图像人脸识别技术
2009/10/11 PHP
PHP类中Static方法效率测试代码
2010/10/17 PHP
Laravel与CI框架中截取字符串函数
2016/05/08 PHP
启用OPCache提高PHP程序性能的方法
2019/03/21 PHP
初学prototype,发个JS接受URL参数的代码
2006/09/25 Javascript
jquery ajax提交表单数据的两种实现方法
2010/04/29 Javascript
TreeView 用法(有代码)(asp.net)
2011/07/15 Javascript
js菜单点击显示或隐藏效果的简单实例
2014/01/13 Javascript
JS获取select的value和text值的简单实例
2014/02/26 Javascript
jquery中radio checked问题
2015/03/16 Javascript
纯css实现窗户玻璃雨滴逼真效果
2015/08/23 Javascript
jquery密码强度校验
2015/12/02 Javascript
javascript检测flash插件是否被禁用的方法
2016/01/14 Javascript
jQuery遍历节点树方法分析
2016/09/08 Javascript
js图片放大镜效果实现方法详解
2020/10/28 Javascript
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
2017/08/29 Javascript
bootstrap table表格插件之服务器端分页实例代码
2018/09/12 Javascript
vuejs router history 配置到iis的方法
2018/09/20 Javascript
vue项目中使用fetch的实现方法
2019/04/25 Javascript
Vue自动构建发布脚本的方法示例
2020/07/24 Javascript
[03:48]2014DOTA2 TI专访71DK夺冠不靠小组赛高排名
2014/07/11 DOTA
[01:10:02]IG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python实现DNS正向查询、反向查询的例子
2014/04/25 Python
Python中使用HTMLParser解析html实例
2015/02/08 Python
python tornado微信开发入门代码
2018/08/24 Python
flask-restful使用总结
2018/12/04 Python
Python基于scipy实现信号滤波功能
2019/05/08 Python
OpenCV+face++实现实时人脸识别解锁功能
2019/08/28 Python
Python3 读取Word文件方式
2020/02/13 Python
django 前端页面如何实现显示前N条数据
2020/03/16 Python
乌克兰巴士票购买网站:inBus
2021/03/12 全球购物
党章学习思想汇报
2014/01/14 职场文书
2014迎接教师节演讲稿
2014/09/10 职场文书
银行竞聘报告范文
2014/11/06 职场文书
2015年保洁工作总结范文
2015/04/28 职场文书
2015年乡镇残联工作总结
2015/05/13 职场文书