浅谈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 相关文章推荐
二叉树的非递归后序遍历算法实例详解
Feb 07 Javascript
javascript实现简单加载随机色方块
Dec 25 Javascript
JS代码实现根据时间变换页面背景效果
Jun 16 Javascript
angular route中使用resolve在uglify压缩后问题解决
Sep 21 Javascript
AngularJS中的Promise详细介绍及实例代码
Dec 13 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
Feb 19 Javascript
Angular排序实例详解
Jun 28 Javascript
web页面和微信小程序页面实现瀑布流效果
Sep 26 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧滑动,右侧不动)
Jan 23 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
Sep 20 Javascript
使用 UniApp 实现小程序的微信登录功能
Jun 09 Javascript
Postman动态获取返回值过程详解
Jun 30 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_xmlhttp 乱码问题解决方法
2009/08/07 PHP
PHP中多维数组的foreach遍历示例
2014/06/13 PHP
php获取网页中图片、DIV内容的简单方法
2014/06/19 PHP
极酷的javascirpt,让你随意编辑任何网页
2007/02/25 Javascript
JQuery 插件制作实践 xMarquee插件V1.0
2010/04/02 Javascript
用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)
2012/06/22 Javascript
JS文本框默认值处理详解
2013/07/10 Javascript
javascript中setTimeout的问题解决方法
2014/05/08 Javascript
使用node.js半年来总结的 10 条经验
2014/08/18 Javascript
js实现有时间限制消失的图片方法
2015/02/27 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
2017/01/18 Javascript
javascript中mouseenter与mouseover的异同
2017/06/06 Javascript
bootstrap-table组合表头的实现方法
2017/09/07 Javascript
利用JS实现scroll自定义滚动效果详解
2017/10/17 Javascript
详解ECMAScript2019/ES10新属性
2019/12/06 Javascript
详解Vue的mixin策略
2020/11/19 Vue.js
Python利用多进程将大量数据放入有限内存的教程
2015/04/01 Python
python基于urllib实现按照百度音乐分类下载mp3的方法
2015/05/25 Python
python动态网页批量爬取
2016/02/14 Python
python使用KNN算法识别手写数字
2019/04/25 Python
Python 如何优雅的将数字转化为时间格式的方法
2019/09/26 Python
Django restframework 框架认证、权限、限流用法示例
2019/12/21 Python
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
2014/10/20 HTML / CSS
沪江旗下的海量优质课程平台:沪江网校
2017/11/07 全球购物
印度民族服装购物网站:BIBA
2019/08/05 全球购物
全球最大的生存食品、水和装备专用在线市场:BePrepared.com
2020/01/02 全球购物
香港零食网购:上仓胃子
2020/06/08 全球购物
请解释在new与override的区别
2012/10/29 面试题
餐饮主管岗位职责
2013/12/10 职场文书
战友聚会邀请函
2014/01/18 职场文书
模具设计与制造专业推荐信
2014/02/16 职场文书
三好生演讲稿
2014/09/12 职场文书
民政局副局长民主生活会个人对照检查材料
2014/09/19 职场文书
优质服务心得体会(共4篇)
2016/01/22 职场文书
redis调用二维码时的不断刷新排查分析
2022/04/01 Redis
MyBatis在注解上使用动态SQL方式(@select使用if)
2022/07/07 Java/Android