浅谈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 相关文章推荐
从新浪弄下来的全屏广告代码 与使用说明
Mar 15 Javascript
表单元素事件 (Form Element Events)
Jul 17 Javascript
学习ExtJS Panel常用方法
Oct 07 Javascript
JQuery入门—JQuery程序的代码风格详细介绍
Jan 03 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
Jan 22 Javascript
javascript HTML5 canvas实现打砖块游戏
Jun 18 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
May 19 Javascript
功能强大的jquery.validate表单验证插件
Nov 07 Javascript
Vue+Vux项目实践完整代码
Nov 30 Javascript
Layer弹出层动态获取数据的方法
Aug 20 Javascript
layui实现三级联动效果
Jul 26 Javascript
vue如何使用rem适配
Feb 06 Vue.js
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
VOLVO车载收音机
2021/03/02 无线电
PHP文件读写操作之文件读取方法详解
2011/01/13 PHP
Linux下php5.4启动脚本
2014/08/03 PHP
php中FTP函数ftp_connect、ftp_login与ftp_chmod用法
2014/11/18 PHP
使用PHP实现阻止用户上传成人照片或者裸照
2014/12/25 PHP
PHP调用存储过程返回值不一致问题的解决方法分析
2016/04/26 PHP
php自定义函数转换html标签示例
2016/09/29 PHP
PHP实现二维数组按某列进行排序的方法
2016/11/18 PHP
PHP registerXPathNamespace()函数讲解
2019/02/03 PHP
PHP抽象类与接口的区别详解
2019/03/21 PHP
浅谈PHP5.6 与 PHP7.0 区别
2019/10/09 PHP
Javascript里使用Dom操作Xml
2006/09/20 Javascript
自己使用jquery写的一个无缝滚动的插件
2014/04/30 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
2016/01/28 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
2016/05/18 Javascript
jQuery实现移动端手机商城购物车功能
2016/09/24 Javascript
浅谈JS读取DOM对象(标签)的自定义属性
2016/11/21 Javascript
JS抛物线动画实例制作
2018/02/24 Javascript
vue页面切换到滚动页面显示顶部的实例
2018/03/13 Javascript
react 国际化的实现代码示例
2018/09/14 Javascript
详解使用React.memo()来优化函数组件的性能
2019/03/19 Javascript
Angular CLI 使用教程指南参考小结
2019/04/10 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
2019/11/07 Javascript
vue-cli点击实现全屏功能
2020/03/07 Javascript
[01:05:59]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.22
2019/09/05 DOTA
JavaScript实现一维数组转化为二维数组
2018/04/17 Python
python GUI图形化编程wxpython的使用
2019/07/19 Python
Python requests设置代理的方法步骤
2020/02/23 Python
美国著名的团购网站:Woot
2016/08/02 全球购物
C#笔试题集合
2013/06/21 面试题
继承时候类的执行顺序问题,一般都是选择题,问你将会打印出什么?
2015/11/18 面试题
外贸英文求职信范文
2015/03/19 职场文书
小学运动会加油稿
2015/07/22 职场文书
redis requires ruby version2.2.2的解决方案
2021/07/15 Redis
python使用shell脚本创建kafka连接器
2022/04/29 Python
Python TypeError: ‘float‘ object is not subscriptable错误解决
2022/12/24 Python