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安装Ubuntu After Install工具实现常用软件批量安装
这个软件集成了常用且好用的软件,且只需要选择需要的软件之后自动安装好,不需要额外设置. 安装: sudo add-apt-repository ppa:thefanclub/ubuntu-after- ...
- WIN10中使用Hyper-V 配置虚拟机宿主机互ping
在Windows10 Hyper-V 中安装 Linux (Ubuntu16.04)虚拟机无法 ping 通宿主机,宿主机可以ping通虚拟机. 这种情况下关闭 Windows 防火墙就能ping通 ...
- CSDN 夏令营程序 试题分析 (2)
题目:若须要在O(nlogn)(以2为底)的时间内完毕对数组的排序.且要求排序是稳定的,则可选择的排序方法是: A.高速排序 B.堆排序 C.归并排序 D.直接插入 ...
- java MAT 分析
java MAT 分析 http://blog.csdn.net/qeqeqe236/article/details/43577857 https://www.cnblogs.com/AloneSwo ...
- 免费好用的Microsoft iSCSI Software Target 3.3
我们在搭建Windows群集的时候往往会使用到IP-SAN.但是面对昂贵的硬件IP-SAN,我们在学习和实验的环境中更加多的用到的往往是软件模拟的IP-SAN.今天就给大家介绍一个微软出品的免费iSC ...
- IE網址欄快速輸入網址,“Ctrl+Enter”補齊“.com”
繁體中文Windows,預設 IE 在網址列輸入 abc,然後按 Ctrl+Enter ,會跳到www.abc.com.tw, 但較常用的連結是www.abc.com,如何修改这一設定呢? 可以透過修 ...
- 卸载MySQL 5.0
昨天在Navicat for mysql中导入一个脚本,执行.出现乱码. 考虑到可能是版本号问题,就想卸载了又一次安装MYSQL,这一卸载倒是出了问题.导致安装的时候安装不上. 后来无意发现是卸载的时 ...
- web前端减少你按刷新的频率
Browsersync 先下载:nodejs ,然后安装完以后,我们在命令行打印 node -v 完成后我们进行以下操作,安装browser-sync ,官网上有详细的教程,请访问:Browsers ...
- ubuntu上跑python连接pg,报错 ImportError: No module named psycopg2
ubuntu上跑python连接pg,报错 ImportError: No module named psycopg2 root@pgproxy1:~# python /home/zxw/PGWri ...
- powershell 的版本号所引起的载入 FSharp 编译器问题
powershell 的版本号所引起的载入 FSharp 编译器问题 在 64 位的系统下,大部分系统文件都有 64 位和 32 位的版本号:通常在C:\WINDOWS\system32 下的是 64 ...