今天在看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. python函数值传递还是引用传递

    c/c++中有值传递引用传递的区别.但是python中是值传递还是引用传递呢?首先看python中对变量的定义 "python中变量是指向某个内存的, 而内存中的内容是不可变的." ...

  2. WebLogic11g-创建域(Domain)及基本配置

      最近看到经常有人提问weblogic相关问题,所以闲暇之际写几篇博文(基于weblogic11),仅供大家参考. 具体weblogic的介绍以及安装,这里就不赘述了. 以域的创建开篇,虽然简单,但 ...

  3. ThinkPHP3.2 点击看不清刷新验证码

    欢迎使用Markdown编辑器写博客 baidu了一下.发现没有可用的源码,自己想了想,以下的方法可行. <!DOCTYPE html> <html> <head> ...

  4. Django学习系列之路由系统

    一.基于App的路由 作用: 根据App对路由规则进行分类,在全局urls.py包含某个项目的urls.py 示例 定义全局urls.py(全局路由系统) #导入include from django ...

  5. AES加密算法的C++实现

    摘要:作为新一代的加密标准,AES 旨在取代 DES(请看<DES加密算法的C++实现>),以适应当今分布式开放网络对数据加密安全性的要求.本文在分析了 AES 加密原理的基础上着重说明了 ...

  6. SSH-struts2的异常处理

    在学习j2se的时候学习过利用java的exception类去处理异常.在struts2框架中也提供了对于异常的处理.简单说就是当Action发生异常时.能够在struts2.xml文件里进行配置,将 ...

  7. web 开发之js---js 多线程编程

    AJAX 开发中的难题 试试多线程编程 想了解更多 有关作者   转载注明出处:http://www.infoq.com/cn/articles/js_multithread 虽然有越来越多的网站在应 ...

  8. JPA測试实例

    依赖架包 实体 import javax.persistence.Column; import javax.persistence.Entity; import javax.persistence.G ...

  9. JavaScript基础 -- ECMAscript

    ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association)通过ECMA-262标准化的脚本 ...

  10. luogu P4719 【模板】动态dp

    noip怎么考这种东西啊...看错题场上爆零凉了 首先我们先进行树链剖分,那么问题可以转换成重链的答案+其他子节点的答案 而每次修改相当于改一段重链的答案,改一次其他子节点的答案交替进行 这样只有一个 ...