今天在看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. Maven具体解释之仓库------本地仓库、远程仓库

    在Maven中,不论什么一个依赖.插件或者项目构建的输出.都能够称之为构件. Maven在某个统一的位置存储全部项目的共享的构件.这个统一的位置.我们就称之为仓库.(仓库就是存放依赖和插件的地方) 不 ...

  2. Java中Comparator接口和Comparable接口的使用

    普通情况下在实现对对象元素的数组或集合进行排序的时候会用到Comparator和Comparable接口,通过在元素所在的类中实现这两个接口中的一个.然后对数组或集合调用Arrays.sort或者Co ...

  3. Android学习笔记-保存数据的实现方法2-SharedPreferences

    Android下,数据的保存,前面介绍过了,把数据保存到内存以及SD卡上,这次我们就介绍一下,更为常用的采用SharedPreferences的方式来保存数据, 1,得到SharedPreferenc ...

  4. Delphi7目录结构

    Delphi7目录结构 打开Delphi的安装目录,如C:\Program Files\Borland\Delphi7,你将会看到目录下包含了一些文件和文件夹:Source:存放的是Delpi提供的所 ...

  5. [Unity-21] Prefab具体解释

    1.什么是Prefab? Prefab又被称为预设,以下部分来自官网:预置是一种资源类型--存储在项目视图中的一种可反复使用的游戏对象.预置能够多次放入到多个场景中. 当你加入一个预置到场景中,就创建 ...

  6. commons-fileupload 组件实现文件上传

    index.jsp 核心代码: //创建文件项工厂 DiskFileItemFactory factory = new DiskFileItemFactory(); //创建解析请求 数据的Servl ...

  7. commons.fileupload 文件上传

    编辑jsp页面获取文件 <html> <head> <base href="<%=basePath%>"> <title> ...

  8. Android 的坑一 :android.content.res.Resources$NotFoundException: String resource ID #0x0 找不到资源文件ID #0x0

    原因分析如下: 遇到这种情况,很有可能是把一个int型业务数据的 设置setText()或者类似的方法中, 这样Android系统就会主动去资源文件当中寻找, 但是它不是一个资源文件ID, 所以就会报 ...

  9. Tiny4412汇编流水灯代码,Tiny4412裸机LED操作【转】

    本转载自:http://www.techbulo.com/1313.html Tiny4412汇编流水灯代码,Tiny4412裸机LED操作 2014年10月20日 ⁄ 裸机程序 ⁄ 共 4171字 ...

  10. RDA UMF进程 & UMF_IR.C 遥控处理

    SIS架构图: SW Structure APP Event Flow :消息分发流程 UMF进程: int umf_main(int argc, char* argv[]) { umf_Init() ...