今天在看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. Ubuntu 16.04安装UML工具StarUML 2

    StarUML 2是一个商业软件,但是没有时间限制,就像Sublime Text 3一样.而且具有跨平台,支持Mac.Windows. 这个软件曾经08年的时候在老D的博客上有推荐过,参考:http: ...

  2. 使用Post方法模拟登陆爬取网页(转)

    使用Post方法模拟登陆爬取网页   最近弄爬虫,遇到的一个问题就是如何使用post方法模拟登陆爬取网页.下面是极简版的代码: import java.io.BufferedReader; impor ...

  3. 【结果发布】第六届SeedCoder编程大赛初赛结果发布

    微软俱乐部科技文化月seedcoder2014编程大赛已经初审完成. 评审小组选出最棒的作品进入决赛(现场答辩+陈述环节,由评委现场打分).终于排名由"初赛分数+现场答辩分"决定. ...

  4. RelativeLayout不能居中的解决的方法

    在LinearLayout中有个让元素居中的办法就是.比方在LinearLayout里有个TextView.设置TextView的gravity能够让其居中. 而在Realative里设置这个不起作用 ...

  5. OpenFileDiag 使用

    MSDN模版 Stream myStream =null; OpenFileDialog openFileDialog1 =newOpenFileDialog(); openFileDialog1.I ...

  6. 制作NGUI动态字体

    在ngui中有两种制做字体的方式.一种是bmfont等工具制作字体图集的方法,这样的方法呢是动态的.生成的图集有多个字就是多少个字,要多加一 个字要又一次用工具做一次,非常是麻烦. 而汉字有太多,我们 ...

  7. linux启动基本流程

    linux启动序列 1.CPU初始化    CPU自身初始化.从某个固定位置(0xfffffff0)取指令并运行,该指令为跳转指令.跳转到BIOS代码的首部. 2.装载BIOS    BIOS被固化在 ...

  8. mciSendString详解(转)

    做个mp3播放器,用realplay和WMP做出来的程序内存占用太大.如果你仅仅是播放MP3,建议使用API函数mciSendString,我把该函数的详细资料罗列如下供你参考.Option Expl ...

  9. 嵌入式Linux系统---ppp拨号,4G模块上网【转】

    本文转载自:http://blog.csdn.net/qq562029186/article/details/65438553 4G模块PPP拨号上网 方法1 所需文件: xxx-chat-conne ...

  10. [译]NUnit--Installation(三)

    Installation NUnit安装程序默认安装文件路径为C:\Program Files\NUnit 2.6.2.根据用户选择安装的选项,安装文件有三个子文件夹:bin.doc.samples. ...