今天在看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. Mybatis 最强大的动态sql <where>标签

    <select id="findActiveBlogLike" resultType="Blog"> SELECT * FROM BLOG WHER ...

  2. json序列化后的是字符串,不是二进制。是字符串!!!确定不是二进制!!!

    1.现有一个自定义对象需要储存到sql数据库中去.这个对象里面属性很多,甚至包含一些元素量打到几十万的List集合属性.本人试着使用JSON序列化这个对象,储存到数据库,报maxjsonlength超 ...

  3. Codeforces Round #271 (Div. 2) D. Flowers (递推 预处理)

    We saw the little game Marmot made for Mole's lunch. Now it's Marmot's dinner time and, as we all kn ...

  4. ShadowDOM

    HTML5 ShadowDOM & CustomElements KeKeMars 关注 2015.12.09 15:20* 字数 1239 阅读 1626评论 2喜欢 2 Web组件由四部分 ...

  5. @SessionAttributes的覆盖与加入

    在我们使用@SessionAttributes 注解向session加入对象时.当我们使用ModelMap的addAttribute()方法是指向session中加入一个新的对象,而使用HttpSes ...

  6. 【Codevs1183】泥泞的道路

    Position: http://codevs.cn/problem/1183/ List Codevs1183 泥泞的道路 List Description Input Output Sample ...

  7. 开始学习java编程

    先看视屏,学习JAVA语法先,后面再看java web mvc,以及myeclipse http://i.youku.com/u/UMzM4MjMxNjMy/videos 争取20天内进步很大.

  8. python 两个文件夹里的文件名对比

    比如需要一个xml对应一个jpg时,有时候会不小心少了其中一个文件,这时可以用以下代码比较缺少的是哪个文件: # -*- coding: utf-8 -*- import os path1 = r'. ...

  9. BZOJ2038 小Z的袜子 (莫队算法)

    题目链接: http://www.lydsy.com/JudgeOnline/problem.php?id=2038 专题练习: http://acm.hust.edu.cn/vjudge/conte ...

  10. source命令用法(转载)

    转自:http://zhidao.baidu.com/link?url=mNfsPHSjTEm7llgyMYx0UVNwkJmD_cxLeHtZnHcM6Ms8LDXofVHka_EzHi6GltbR ...