今天在看javascript入门经典-事件一章中看到了 this 和 event 两种传参形式。因为作为一个初级的前端开发人员平时只用过 this传参,so很想弄清楚,this和event的区别是什么,什么情况下用什么比较合适。

  onclick = changeImg(this)       vs     onclick = changeImg(event)

<img src='usa.gif' onclick="changeImg(event)" />
<script>
  var myImages = [
    'usa.gif','canada.gif','jamaica.gif','mexico.gif'
  ];
  function changeImg(e) {
    var el = e.target;
    var newImgNumber = Math.round(Math.round()*3);
    while(el.src.indexOf(myImages[newImgNumber]) != -1){
      el.src =myImages[newImgNumber];
    }
  }
</script>
  1. this是Javascript语言的一个关键字。

  2. this代表函数运行时,自动生成的一个内部对象,只能在函数内部使用。

  3. this和event.target的区别:

    js中事件是会冒泡的,所以this是可以变化的,但event.target不会变化(在事件触发时,只传递当前event对象的引用),它永远是直接接受事件的目标DOM元素;

  另外,this和event.target都是dom对象,如果要使用jquey中的方法可以将他们转换为jquery对象:$(this)和$(event.target);

  今天(2017/12/06)发现了更详细的讲解,有使用过程中的详细介绍,需要的小伙伴们可以自行查看:jquery 关于event.target使用的几点说明介绍

js this 和 event 的区别的更多相关文章

  1. js onkeypress与onkeydown 事件区别详细说明

    keypress只适用于有字符输入的按键 而keyup/keydown包含了Ctrl, Shift之类的情况 Firefox在处理onKeyDown/onKeyPress事件时存在漏洞,恶意网页可能利 ...

  2. js中== 和===中的区别

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  3. JS中的event 对象详解

    JS中的event 对象详解   JS的event对象 Event属性和方法:1. type:事件的类型,如onlick中的click:2. srcElement/target:事件源,就是发生事件的 ...

  4. js中const,var,let区别(转载)

    js中const,var,let区别 来源:https://www.cnblogs.com/zzsdream/p/6372729.html 今天第一次遇到const定义的变量,查阅了相关资料整理了这篇 ...

  5. js 创建数组方法以及区别

    示例代码: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF ...

  6. js trigger click event & dispatchEvent & svg element

    js trigger click event & dispatchEvent & svg element but svg element not support trigger cli ...

  7. js in depth: event loop & micro-task, macro-task & stack, queue, heap & thread, process

    js in depth: event loop & micro-task, macro-task & stack, queue, heap & thread, process ...

  8. js事件之event.preventDefault()与event.stopPropagation()用法区别

    event.preventDefault()用法介绍 该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作).例如,如果 type 属性是 "submit" ...

  9. js事件之event.preventDefault()与(www.111cn.net)event.stopPropagation()用法区别

    event.preventDefault()用法介绍 该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作).例如,如果 type 属性是 "submit" ...

随机推荐

  1. CSS头像右上角的讨厌红点

    就是这个讨厌的红点,如图: 说明: 1.主要用到position定位: 2.使用border-radius画圆角: 源码: <!DOCTYPE html> <html> < ...

  2. Linux NFS服务器的安装与配置(转载)

    一.NFS服务简介 NFS 是Network File System的缩写,即网络文件系统.一种使用于分散式文件系统的协定,由Sun公司开发,于1984年向外公布.功能是通过网络让不同的机器.不同的操 ...

  3. symfony could not load type 'datetime'

    当用curd生成控制器后,当修改的时候,会有这个提示,解决方法 在orm中通过事务的方式填充时间,然后把生成的form中的文件的时间段去掉 $builder ->add('title') -&g ...

  4. Linux命令输出头(标题)、输出结果排序技巧

    原文:http://blog.csdn.net/hongweigg/article/details/65446007 ----------------------------------------- ...

  5. IE網址欄快速輸入網址,“Ctrl+Enter”補齊“.com”

    繁體中文Windows,預設 IE 在網址列輸入 abc,然後按 Ctrl+Enter ,會跳到www.abc.com.tw, 但較常用的連結是www.abc.com,如何修改这一設定呢? 可以透過修 ...

  6. Smart Home DIY 计划

    工作了这么长时间了,感觉自己眼下的工作内容非常不利于技术水平的提升,对此状况,我心里深感不踏实.因此,我决定利用下班时间.边学习边做,做一套真正可用的智能家居系统,首先部署到自己居住的房间. 对此智能 ...

  7. 爸爸和儿子的故事带你理解java线程

    今天回想线程方面的知识,发现一个非常有意思的小程序.是用来说明多线程的以下贴出来分享下,对刚開始学习的人理解线程有非常大的帮助 爸爸和儿子的故事 <span style="font-f ...

  8. distcp导致个别datanode节点数据存储严重不均衡分析

    hadoop2.4生产集群已经执行一段时间了.因为大量的hadoop1.0上面的应用不断迁移过来.刚開始事hdfs这边还没有出现多少问题.随着时间的推移,近期发现个别的datanode节点上面的磁盘空 ...

  9. BZOJ1202 [HNOI2005]狡猾的商人 并查集维护前缀和

    1202: [HNOI2005]狡猾的商人 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 1935  Solved: 936[Submit][Stat ...

  10. document.getElementsByClassName("head")[0].parentElement

    document.getElementsByClassName("head")[0].parentElement