浅谈javascript中this在事件中的应用


Posted in Javascript onFebruary 15, 2015

this关键字在javascript中是非常强大的,但是如果你不清楚它是怎么工作的就很难使用它.

function dosomething(){ this.style.color="#fff"; }

上面这段代码中的this指向什么呢,运行dosomething()会输出什么呢?

在javascript中,this总是指向当前执行的这个函数,或者把函数作为方法调用的这个对象.当我们在页面上定义dosomething()这个方法后,this的所有者就是当前的页面,或者说是全局对象.

所以我们执行dosomething()这个函数,会引发错误.因为函数的this指向的是全局对象window,而window对象没有style属性.

复制:

element.onclick=dosomething;

dosomething()现在被整个复制到onclick属性上作为一个方法.所以如果这个事件执行的话,this就指向这个HTML元素,相应HTML元素的color就会改变.dosomething每次复制到事件上,this就会指向当前执行这个方法的html元素.

引用:

<element onclick="dosomething()">

此时你没有复制这个方法,而是引用了这个方法,onclick属性并不包含实际的方法,仅仅只是一个方法的调用.当我们执行这个方法时,this再次指向全局window对象并引发错误.

以上就是本文的全部内容了,有需要的小伙伴好好来研究下吧。

Javascript 相关文章推荐
区分JS中的undefined,null,&quot;&quot;,0和false
Mar 08 Javascript
js 上传图片预览问题
Dec 06 Javascript
Javascript中的window.event.keyCode使用介绍
Apr 26 Javascript
js格式化货币数据实现代码
Sep 04 Javascript
js给onclick赋值传参数的两种方法
Nov 25 Javascript
更快的异步执行(setTimeout多浏览器)
Aug 12 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
Aug 25 Javascript
原生js的RSA和AES加密解密算法
Oct 08 Javascript
详解JS去重及字符串奇数位小写转大写
Dec 29 Javascript
jQuery图片瀑布流的简单实现代码
Mar 15 Javascript
Vue用v-for给src属性赋值的方法
Mar 03 Javascript
web页面和微信小程序页面实现瀑布流效果
Sep 26 Javascript
javascript使用正则表达式实现去掉空格之后的字符
Feb 15 #Javascript
分享一个自己写的简单的javascript分页组件
Feb 15 #Javascript
Linux下编译安装php libevent扩展实例
Feb 14 #Javascript
jQuery中extend函数详解
Feb 13 #Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
Feb 13 #Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
Feb 13 #Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
Feb 13 #Javascript
You might like
PHP 程序授权验证开发思路
2009/07/09 PHP
php在线解压ZIP文件的方法
2014/12/30 PHP
javascript实现的像java、c#之类的sleep暂停的函数代码
2010/03/04 Javascript
IE6下js通过css隐藏select的一个bug
2010/08/16 Javascript
jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
2011/06/28 Javascript
不用构造函数(Constructor)new关键字也能实现JavaScript的面向对象
2013/01/11 Javascript
jQuery 过滤方法filter()选择具有特殊属性的元素
2014/06/15 Javascript
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
2014/12/29 Javascript
JavaScript基于setTimeout实现计数的方法
2015/05/08 Javascript
使用javascript插入样式
2016/03/14 Javascript
如何利用模板将HTML从JavaScript中抽离
2016/10/08 Javascript
详解js中Number()、parseInt()和parseFloat()的区别
2016/12/20 Javascript
微信小程序 sha1 实现密码加密实例详解
2017/07/06 Javascript
在Vue中使用echarts的实例代码(3种图)
2017/07/10 Javascript
React 高阶组件入门介绍
2018/01/11 Javascript
解决vue中修改了数据但视图无法更新的情况
2018/08/27 Javascript
深入理解Angularjs 脏值检测
2018/10/12 Javascript
将Django使用的数据库从MySQL迁移到PostgreSQL的教程
2015/04/11 Python
Python多进程multiprocessing用法实例分析
2017/08/18 Python
Python人工智能之路 之PyAudio 实现录音 自动化交互实现问答
2019/08/13 Python
python pygame实现球球大作战
2019/11/25 Python
Pytorch根据layers的name冻结训练方式
2020/01/06 Python
pytorch 模型的train模式与eval模式实例
2020/02/20 Python
TensorFlow实现模型断点训练,checkpoint模型载入方式
2020/05/26 Python
Python基于xlutils修改表格内容过程解析
2020/07/28 Python
应届生服务员求职信
2013/10/31 职场文书
高中班长自我鉴定
2013/12/20 职场文书
餐厅筹备计划书
2014/04/25 职场文书
关于爱国的演讲稿
2014/05/07 职场文书
年终考核实施方案
2014/05/26 职场文书
个人政治思想总结
2015/03/05 职场文书
保险公司客户经理岗位职责
2015/04/09 职场文书
Redis做数据持久化的解决方案及底层原理
2021/07/15 Redis
css3带你实现3D转换效果
2022/02/24 HTML / CSS
OpenCV项目实践之停车场车位实时检测
2022/04/11 Python
CSS的calc函数用法小结
2022/06/25 HTML / CSS