js this 和 event 的区别
今天在看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>
this是Javascript语言的一个关键字。
this代表函数运行时,自动生成的一个内部对象,只能在函数内部使用。
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 的区别的更多相关文章
- js onkeypress与onkeydown 事件区别详细说明
keypress只适用于有字符输入的按键 而keyup/keydown包含了Ctrl, Shift之类的情况 Firefox在处理onKeyDown/onKeyPress事件时存在漏洞,恶意网页可能利 ...
- js中== 和===中的区别
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- JS中的event 对象详解
JS中的event 对象详解 JS的event对象 Event属性和方法:1. type:事件的类型,如onlick中的click:2. srcElement/target:事件源,就是发生事件的 ...
- js中const,var,let区别(转载)
js中const,var,let区别 来源:https://www.cnblogs.com/zzsdream/p/6372729.html 今天第一次遇到const定义的变量,查阅了相关资料整理了这篇 ...
- js 创建数组方法以及区别
示例代码: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF ...
- js trigger click event & dispatchEvent & svg element
js trigger click event & dispatchEvent & svg element but svg element not support trigger cli ...
- 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 ...
- js事件之event.preventDefault()与event.stopPropagation()用法区别
event.preventDefault()用法介绍 该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作).例如,如果 type 属性是 "submit" ...
- js事件之event.preventDefault()与(www.111cn.net)event.stopPropagation()用法区别
event.preventDefault()用法介绍 该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作).例如,如果 type 属性是 "submit" ...
随机推荐
- Redis基于Java的客户端SDK收集
如果要找这类的SDK,第一反应应该直奔官网,找一下看下有什么推荐.先找最权威的回答,找不到再尝试民间方案. 就Redis来说,官方已经提供了一个列表包括市面上绝大多数语言的SDK,可以参考以下网址看J ...
- yarn-cli 缓存
yarn cache list Yarn 会在你的用户目录下开辟一块全局缓存用以保存下载的包.yarn cache list 用于列出所有已经缓存的包. yarn cache dir 执行 yarn ...
- android动态控制组件的位置、大小和新的动画
一.动态设置组件的位置 当中view是须要改变位置的控件,top是须要设制的位置: private static void setLayoutX(View view,int top) { //克隆v ...
- django 名词解释
1) 什么是slug http://stackoverflow.com/questions/427102/what-is-a-slug-in-django 如上链接红色部分就是slug,它就是链接的最 ...
- Spring MVC不要在@Service bean中保存状态
先看这么一段代码: @Service public class AccountService { private String message; public void foo1() { if (tr ...
- 多个client与一个server端通信的问题
多个client与一个server端通信的问题 上篇博文主要是讲的关于client与server端的通信问题.在上篇博文中当我们仅仅有一个client訪问我们的server时是能够正常执行的,可是当我 ...
- hdu 5001 概率DP 图上的DP
http://acm.hdu.edu.cn/showproblem.php?pid=5001 当时一看是图上的就跪了 不敢写,也没退出来DP方程 感觉区域赛的题 一则有一个点难以想到 二则就是编码有 ...
- 各种comprehension
1 什么是comprehension list.set.dict.generator等本质上是集合.所以,数学上的集合的表示引入到python中,{x| x属于某个集合}. 所以,comprehens ...
- gitlab常见错误解决办法
1 fail: gitlab-workhorse: runsv not running systemctl start gitlab-runsvdir.service systemctl status ...
- 容器HashSet原理(学习)
一.概述 使用HashMap存储,非线程安全: 二.实现 HashSet 底层使用 HashMap 来保存所有元素,因此 HashSet 的实现比较简单,相关 HashSet 的操作,基本上都是直接调 ...