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. ios-NSMutableAttributedString 更改文本字符串颜色、大小

    NSString * string = [NSString stringWithFormat:@"您的号码是%@号",[self backString:dic[@"ran ...

  2. Thinking in Java——笔记(3)

    Operator Using Java operators Some operators change the value of an operand. This is called a side e ...

  3. xcode 6 创建的工程上下有黑边

  4. [分享]IOS开发-简单实现搜索框显示历史记录的本地缓存及搜索历史每次只能获取到一个的解决方案

    注:原文:http://www.zhimengzhe.com/IOSkaifa/40433.html 1.首先,我们需要对进行过搜索的textField的输入内容进行一个NSUserDefaults的 ...

  5. IntelliJ IDEA全文搜索很给力

  6. mysql 查表失败

    我们数据库迁移,我进数据库的目录都需要拷贝什么到新的数据库才可以用,我直接拷贝的库报错了[]北京- 2016/1/26 16:07:33 mysql> use payment;Database  ...

  7. iOS ARC中CTCallCenter没用,无法监听电话的解决方案

    今天在尝试使用CTCallCenter进行电话监听时,发现一直无法捕获电话状态改变的事件,研究了一番之后找到了解决方案,在这里分享给大家. 首先使用CTCallCenter监听电话的代码如下: CTC ...

  8. Java提高篇——equals()方法和“==”运算符

    equals() 超类Object中有这个equals()方法,该方法主要用于比较两个对象是否相等.该方法的源码如下: public boolean equals(Object obj) { retu ...

  9. jquery判断页面是否滑动到最底部

    // 滚动到底部,向下的箭头消失 var $down = $('.down'); var $window = $(window); var $document = $(document); $wind ...

  10. Fiddler---前端利器

    摘要:Fiddler是一个不错的工具,可以用来调试HTTP协议.工具很强大,本篇根据现有使用总结了下,以后有更多使用再做补充. 在做HTTPS协议对接的时候,拿不到数据,不得不找个工具试下,确定是接收 ...