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安装TeamViewer
安装i386库: sudo apt-get install libc6:i386 libgcc1:i386 libasound2:i386 libexpat1:i386 libfontconfig1: ...
- RIP
距离矢量路由协议 假设网络拓扑如下 192.168.1.0网段 - - - - R1 - - 192.168.12.0网段 - - R2 - - 192.168.23.0网段 - - R3 - - - ...
- 【Python】python扩展
当python的基本功能无法满足要求.或者是为了保密源码(.py).遇到性能瓶颈时,我们经常要扩展python,扩展语言能够是C/C++.Java.C#等. 为python创建扩展须要三个基本的步骤: ...
- 手动脱RLPack壳实战
作者:Fly2015 吾爱破解论坛培训第一课选修作业练习的第7题. 这个壳没听说过.可是脱起来比較简单.依据ESP定律就可以直达光明,Dump出原来的程序. 老规矩.首先对须要脱壳的程序进行查壳处理. ...
- Photoshop制作的ico图标方法
photoshop是打不开ico的.只是能够通过安装插件实现. 插件点击这里能够下载. 用法,解压后的插件文件 粘贴到: (英文版路径) /program files/adobe/photoshop ...
- 【面试加分项】java自己定义注解之解析注解
我之前的博客中说明过自己定义注解的声明今天我们来看看怎样对我们自己定义的注解进行使用. 1.我们在程序中使用我们的注解. 上一篇中我们自己定义了一个注解: @Target(ElementType.FI ...
- 【Android】使用 SwipeRefreshLayout 实现下拉刷新
今天在codepath 上看到一个开源项目 [点击查看]使用到了 SwipeRefreshLayout 实现了下拉刷新,但演示样例并不完整,于是自己就动手写了下.之前看到郭霖的博客上也有介绍下拉刷新, ...
- PHP mysql 连接ipV6地址
需要在PHP页面中通过ipv6连接数据库,但是发现无论是用mysql_connect还是mysqli_connect,如果host是ipv6格式,就不能正常连接,会提示“php_network_get ...
- gitlab结构分析
1 gitlab的工作流程 2
- 今晚的两道 bc
第一道题 Beautiful Palindrome Number ,简单组合计数问题,手算打表就好~大概十五分钟左右搞定[第一次 提交竟然 wa了一次 有一个小小的坑在那.... /******** ...