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" ...
随机推荐
- Ubuntu 16.04安装qt5-default报错:qt5-default : 依赖: qtbase5-dev E: 无法修正错误,因为您要求某些软件包保持现状,就是它们破坏了软件包间的依赖关系。(此类问题终极解决方法)
切记:没事不要进行sudo apt-get upgrade 错误: qt5-default : 依赖: qtbase5-dev E: 无法修正错误,因为您要求某些软件包保持现状,就是它们破坏了软件包间 ...
- 人脸识别“Neural Aggregation Network for Video Face Recognition”
人脸识别的新方法.主要对视频进行处理.使用CNN提取视频中多帧人像的特征,之后使用聚合模块对全部帧的特征向量进行学习累积.实验结果表明这样的方法比手工设计的方法如平均池化要好.人脸识别结构例如以下图所 ...
- mciSendString详解(转)
做个mp3播放器,用realplay和WMP做出来的程序内存占用太大.如果你仅仅是播放MP3,建议使用API函数mciSendString,我把该函数的详细资料罗列如下供你参考.Option Expl ...
- javascript总结03
- RK3288的gpio设置【转】
本文转载自:http://blog.csdn.net/keleming1/article/details/51034766 转http://www.360doc.com/content/14/1227 ...
- bzoj5311: 贞鱼
还是年轻啊算的时候少乘一个4000被卡二分上界了...%%%%bright教我超级快速读D飞bzoj垃圾卡常数据 我们容易写出这样的DP方程:f[i][j]=f[k][j-1]+val(k+1,j) ...
- C# WINFORM 窗体执行ORACLE存储过程 进行增删改查 自己编写借助网络(二)
窗体界面: 下面是项目二的代码 本代码我是留着备份学习的 以供参考: 存储过程: 存储过程: 插入数据:CREATE OR REPLACE Procedure p_insert_t_cls --存储过 ...
- 【CSU 1079】树上的查询
http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1079 现有一棵有N个顶点的树,顶点的标号分别为1, 2, …, N.对于每个形如a b k的询问, ...
- window环境下在anconda中安装opencv
今日学习CNN神经网络,在用keras框架下搭建一个简单的模型的时候需要import cv2,我尝试了一下几种方法: 1. 在prompt输入 pip intall opencv-python 出现如 ...
- Web安全总结摘录
借助刚才看到的文章,回顾一下常见的Web安全问题:XSS.CSRF.SQL注入漏洞. 一.XSS XSS (Cross Site Script),跨站脚本攻击,因为缩写和 CSS (Cascading ...