深入理解在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 相关文章推荐
实例:用 JavaScript 来操作字符串(一些字符串函数)
Feb 15 Javascript
基于jquery的关于动态创建DOM元素的问题
Dec 24 Javascript
基于jquery跨浏览器显示的file上传控件
Oct 24 Javascript
js操作textarea 常用方法总结
Dec 03 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
Mar 05 Javascript
跟我学习javascript的浮点数精度
Nov 16 Javascript
JavaScript中子对象访问父对象的方式详解
Sep 01 Javascript
js css3实现图片拖拽效果
Mar 04 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
Sep 14 Javascript
基于JavaScript 性能优化技巧心得(分享)
Dec 11 Javascript
如何从零开始利用js手写一个Promise库详解
Apr 19 Javascript
前后端常见的几种鉴权方式(小结)
Aug 04 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
对象失去焦点时自己动提交数据的实现代码
2012/11/06 PHP
如何解决CI框架的Disallowed Key Characters错误提示
2013/07/05 PHP
PHP高级编程实例:编写守护进程
2014/09/02 PHP
tp5(thinkPHP5框架)使用DB实现批量删除功能示例
2019/05/28 PHP
Autocomplete Textbox Example javascript实现自动完成成功
2007/08/17 Javascript
基于jquery的让textarea自适应高度的插件
2010/08/03 Javascript
js获取height和width的方法说明
2013/01/06 Javascript
兼容IE和FF的图片上传前预览js代码
2013/05/28 Javascript
JavaScript简单实现网页回到顶部功能
2013/11/12 Javascript
Javascript setInterval的两种调用方法(实例讲解)
2013/11/29 Javascript
网站内容禁止复制和粘贴、另存为的js代码
2014/02/26 Javascript
jquery easyui使用心得
2014/07/07 Javascript
JavaScript 封装一个tab效果源码分享
2015/09/15 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
2016/10/03 Javascript
Html5 js实现手风琴效果
2020/04/17 Javascript
简单实现js轮播图效果
2017/07/14 Javascript
react实现菜单权限控制的方法
2017/12/11 Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
2019/05/29 Javascript
JQuery实现简单的复选框树形结构图示例【附源码下载】
2019/07/16 jQuery
linux 下以二进制的方式安装 nodejs
2020/02/12 NodeJs
antd table按表格里的日期去排序操作
2020/11/17 Javascript
[02:30]DOTA2英雄基础教程 暗影恶魔
2013/12/17 DOTA
[53:10]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs VG 第一场
2018/04/11 DOTA
Python连接MySQL并使用fetchall()方法过滤特殊字符
2016/03/13 Python
Python实现翻转数组功能示例
2018/01/12 Python
详解Python中的四种队列
2018/05/21 Python
Python完成哈夫曼树编码过程及原理详解
2019/07/29 Python
python中shell执行知识点
2020/05/06 Python
HTML5实现移动端点击翻牌功能
2020/10/23 HTML / CSS
客户代表自我评价范例
2013/09/24 职场文书
早餐连锁店计划书
2014/01/08 职场文书
《路旁的橡树》教学反思
2014/04/07 职场文书
低碳日宣传活动总结
2014/07/09 职场文书
授权委托书格式范文
2014/08/02 职场文书
寻找最美家庭活动方案
2014/08/20 职场文书
Python OpenGL基本配置方式
2022/05/20 Python