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 this在事件中的应用的更多相关文章

  1. 网页中,鼠标点击与javascript的click事件怎么区分处理

    就下面问题发现另一个方式: js代码: <script> //IE if(document.all) { document.getElementById("clickme&quo ...

  2. JavaScript DOM编程基础精华02(window对象的属性,事件中的this,动态创建DOM,innerText和innerHTML)

    window对象的属性1 window.location对象: window.location.href=‘’;//重新导航到新页面,可以取值,也可以赋值. window.location.reloa ...

  3. JavaScript的for循环中嵌套一个点击事件为何点击一次弹出多个相同的值

    先看下面一段代码: for(var i=0; i<10; i++) { $('#ul').bind('click', function() { alert(i) }) } 对于这段代码,当点击I ...

  4. javascript event(事件对象)详解

    javascript event(事件对象)详解   1. 事件对象     1. 事件对象 Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 什 ...

  5. javascript之-深入事件机制

    作者:yuyuyu链接:https://zhuanlan.zhihu.com/p/24620643来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 1.1 事件绑定的方式 ...

  6. JavaScript基础—dom,事件

    Js基础-DOM 1:dom:文档对象模型 Dom就是html页面的模型,将每个标签都作为一个对象,js通过调用dom中的属性,方法就可以对网页中的文本框,层等元素进行编程控制.Dom就是一些让jav ...

  7. DOM - 5.事件冒泡 + 6.事件中的this

    5.事件冒泡 如果元素A嵌套在元素B中,那么A被点击不仅A的onclick事件会被触发,B的onclick也会被触发.触发的顺序是"由内而外" .验证:在页面上添加一个table. ...

  8. JavaScript HTML DOM 事件

    JavaScript HTML DOM 事件 HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应. 实例 Mouse Over Me 对事件做出反应 我们可以在事件发生时执行 ...

  9. jQuery 的ready事件和 JavaScript 的load事件对比

    为了理解2个事件的异同,先了解一下HTML文档加载顺序 HTML DOM文档加载步骤 HTML DOM文档加载是按顺序执行的,这与浏览器的渲染方式有关,一般浏览器渲染操作的顺序大致按如下几个步骤 1, ...

随机推荐

  1. 为Docker容器指定自定义网段的固定IP/静态IP地址

    第一步:创建自定义网络 备注:这里选取了172.172.0.0网段,也可以指定其他任意空闲的网段 docker network create --subnet=172.172.0.0/16 docke ...

  2. ExtJS笔记 Using Events

    Using Events The Components and Classes of Ext JS fire a broad range of events at various points in ...

  3. php5-fpm.sock failed (13: Permission denied) error

    In order to fix the php5-fpm.sock failed error follow these instructions 1) Make sure your virtual h ...

  4. C++程序设计(二)

    1. 类 class CRectangle { public: int w, h; void Init( int w_, int h_ ) { w = w_; h = h_; } int Area() ...

  5. java math library

    https://github.com/jroyalty/jglm https://github.com/JOML-CI/JOML

  6. raspberry pi

    1. Expend System (sudo raspi-config) 2. Change keybaord layout to 104 key (US) 3. Change update sour ...

  7. hduoj 3459 Rubik 2×2×2

    http://acm.hdu.edu.cn/showproblem.php?pid=3459 Rubik 2×2×2 Time Limit: 10000/5000 MS (Java/Others)   ...

  8. POJ - 3652 Persistent Bits

    “模拟”类型,题型容易,使用bitset库对二进制逐位操作,初始化.十进制转二进制(unsigned int).位操作. POJ - 3652 Persistent Bits Time Limit:  ...

  9. 重构wangEditor(web富文本编辑器),欢迎指正!

    提示:最新版wangEditor请参见:wangEditor.github.io 或者 https://github.com/wangfupeng1988/wangEditor 1. 前言 (下载源码 ...

  10. 将java项目转换成Web项目

    http://www.cnblogs.com/kaige123/p/5866446.html 在项目上点击右键,进入Properties配置,点击Project Facets,再点击Convert t ...