浅谈javascript中this在事件中的应用
更新时间：2015年02月15日 09:13:37 投稿：hebedich
这篇文章主要介绍了浅谈javascript中this在事件中的应用实例，非常有助于我们对this关键字的理解，这里推荐给大家。
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对象并引发错误.
以上就是本文的全部内容了，有需要的小伙伴好好来研究下吧。
相关文章
Canvas对于我们前端来说是一个非常强大的工具,它可以实现各种复杂的图形和动画效果,我们如果能够熟练掌握它,我们就可以做很多炫酷的效果,本文就给大家介绍了用canvas画出一片星空的方法,需要的朋友可以参考下2023-11-11
带有关闭功能的漂浮图片的实现方法有很多，下面为大家介绍下使用Javascript是如何实现的，喜欢的额朋友可以了解下2014-01-01
回调函数就是一个通过函数指针调用的函数。下面以示例的方式为大家介绍下其具体的使用2014-02-02
这篇文章主要介绍了JS立即执行的匿名函数,结合实例形式分析了;(function() {})();相关原理、使用技巧及操作注意事项,需要的朋友可以参考下2019-11-11
用servlet赋值给html页面文本框值后,用alert来弹出这个值.结果显示"undefined".下面为大家介绍下具体的判断方法，大家可以参考下2014-03-03
在本篇文章里小编给大家整理的是关于js实现无限瀑布流实例方法以及相关代码，需要的朋友们学习下吧。2019-09-09
这篇文章主要介绍的是如何利用fecha进行JS日期处理，在日常项目中，经常会碰到日期处理的需求，这种需求千奇百怪，而且往往经常变化。虽然js提供了原生的Date方法供我们选择，但一些复杂的日期时间处理起来往往力不从心。下面通过这篇文章来一起学习学习吧。2016-11-11
javascript 播放器 控制...2007-01-01
这篇文章主要为大家详细介绍了微信小程序实现手写板，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
bootstrap-table 是一个轻量级的table插件，使用AJAX获取JSON格式的数据，其分页和数据填充很方便，支持国际化。这篇文章介绍了bootstrap中table分页插件的使用，感兴趣的朋友一起看看吧2016-10-10
最新评论