浅谈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解决数字不能换行问题
Aug 10 Javascript
JQuery中对Select的option项的添加、删除、取值
Aug 25 Javascript
jquery showModelDialog的使用方法示例详解
Nov 19 Javascript
简单选项卡 js和jquery制作方法分享
Feb 26 Javascript
推荐6款基于jQuery实现图片效果插件
Dec 07 Javascript
使用Node.js实现HTTP 206内容分片的教程
Jun 23 Javascript
seajs模块之间依赖的加载以及模块的执行
Oct 21 Javascript
jQuery Validate设置onkeyup验证的实例代码
Dec 09 Javascript
详解基于webpack搭建react运行环境
Jun 01 Javascript
微信小程序自定义导航栏
Dec 31 Javascript
IntelliJ IDEA编辑器配置vue高亮显示
Sep 26 Javascript
微信小程序实现watch监听
Jun 04 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中文件上传的安全问题
2006/10/09 PHP
非常不错的MySQL优化的8条经验
2008/03/24 PHP
php使用GD2绘制几何图形示例
2017/02/15 PHP
JavaScript 继承详解(四)
2009/07/13 Javascript
javascript ie6兼容position:fixed实现思路
2013/04/01 Javascript
ext中store.load跟store.reload的区别示例介绍
2014/06/17 Javascript
仿淘宝TAB切换搜索框搜索切换的相关内容
2014/09/21 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
2016/06/13 Javascript
Bootstrap使用基础教程详解
2016/09/05 Javascript
Jquery AJAX POST与GET之间的区别详细介绍
2016/10/17 Javascript
jQuery实用密码强度检测
2017/03/02 Javascript
说说AngularJS中的$parse和$eval的用法
2017/09/14 Javascript
彻底搞懂JavaScript中的apply和call方法(必看)
2017/09/18 Javascript
vue2.x+webpack快速搭建前端项目框架详解
2017/11/30 Javascript
javaScript日期工具类DateUtils详解
2017/12/08 Javascript
javascript与PHP动态往类中添加方法对比
2018/03/21 Javascript
JavaScript设计模式之原型模式分析【ES5与ES6】
2018/07/26 Javascript
vue动态绘制四分之三圆环图效果
2019/09/03 Javascript
如何换个角度使用VUE过滤器详解
2019/09/11 Javascript
JavaScript封装单向链表的示例代码
2020/09/17 Javascript
11个Javascript小技巧帮你提升代码质量(小结)
2020/12/28 Javascript
Python实现提取文章摘要的方法
2015/04/21 Python
从源码解析Python的Flask框架中request对象的用法
2016/06/02 Python
pandas 对series和dataframe进行排序的实例
2018/06/09 Python
详解python路径拼接os.path.join()函数的用法
2019/10/09 Python
使用Python完成15位18位身份证的互转功能
2019/11/06 Python
python 检查数据中是否有缺失值,删除缺失值的方式
2019/12/02 Python
Python生成器next方法和send方法区别详解
2020/05/30 Python
基于Python爬取股票数据过程详解
2020/10/21 Python
美国成衣女装品牌:CHICO’S
2016/09/19 全球购物
硕士研究生自我鉴定范文
2013/12/27 职场文书
拒绝黄毒毒宣传标语
2014/06/26 职场文书
大学辅导员述职报告
2015/01/10 职场文书
水电工岗位职责
2015/02/14 职场文书
2015大学自主招生自荐信范文
2015/03/04 职场文书
60条职场经典语录,总有一条能触动你的心
2019/08/21 职场文书