基于js中this和event 的区别(详解)


Posted in Javascript onOctober 24, 2017

今天在看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);

以上这篇基于js中this和event 的区别(详解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js监控IE火狐浏览器关闭、刷新、回退、前进事件
Jul 23 Javascript
JQuery中上下文选择器实现方法
May 18 Javascript
js实现网页抽奖实例
Aug 05 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
May 14 Javascript
Bootstrap基本组件学习笔记之下拉菜单(7)
Dec 07 Javascript
js实现表格筛选功能
Jan 18 Javascript
Angular2平滑升级到Angular4的步骤详解
Mar 29 Javascript
vue scroller返回页面记住滚动位置的实例代码
Jan 29 Javascript
vue里input根据value改变背景色的实例
Sep 29 Javascript
Vue数字输入框组件使用方法详解
Feb 10 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
Mar 29 Javascript
JS如何寻找数组中心索引过程解析
Jun 01 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
Oct 24 #Javascript
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 #jQuery
通俗易懂地解释JS中的闭包
Oct 23 #Javascript
AngularJS 教程及实例代码
Oct 23 #Javascript
浅谈Koa服务限流方法实践
Oct 23 #Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
Oct 23 #Javascript
angularjs实现猜大小功能
Oct 23 #Javascript
You might like
一个用于MySQL的PHP XML类
2006/10/09 PHP
优化php效率,提高php性能的一些方法
2011/03/24 PHP
php文件打包 下载之使用PHP自带的ZipArchive压缩文件并下载打包好的文件
2012/06/13 PHP
php图片加中文水印实现代码分享
2012/10/31 PHP
smarty中英文多编码字符截取乱码问题解决方法
2014/10/28 PHP
php+MySql实现登录系统与输出浏览者信息功能
2016/07/01 PHP
JavaScript 学习笔记(十一)
2010/01/19 Javascript
基于jQuery的消息提示插件 DivAlert之旅(二)
2010/04/01 Javascript
javascript权威指南 学习笔记之变量作用域分享
2011/09/28 Javascript
通过jquery还原含有rowspan、colspan的table的实现方法
2012/02/10 Javascript
jquery实现盒子下拉效果示例代码
2013/09/12 Javascript
浅析Node.js查找字符串功能
2014/09/03 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
2014/10/17 Javascript
D3.js实现柱状图的方法详解
2016/09/21 Javascript
100行代码理解和分析vue2.0响应式架构
2017/03/09 Javascript
JavaScript 复制对象与Object.assign方法无法实现深复制
2018/11/02 Javascript
Vue动态路由缓存不相互影响的解决办法
2019/02/19 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
2020/01/21 Javascript
Vue常用传值方式、父传子、子传父及非父子实例分析
2020/02/24 Javascript
[55:44]完美世界DOTA2联赛决赛 FTD vs Phoenix 第二场 11.08
2020/11/11 DOTA
忘记ftp密码使用python ftplib库暴力破解密码的方法示例
2014/01/22 Python
Python中的闭包总结
2014/09/18 Python
python使用标准库根据进程名如何获取进程的pid详解
2017/10/31 Python
python模块常用用法实例详解
2019/10/17 Python
在Python中预先初始化列表内容和长度的实现
2019/11/28 Python
css3动画 小球滚动 js控制动画暂停
2019/11/29 HTML / CSS
中海讯通笔试题
2015/09/15 面试题
前台接待员岗位职责
2014/01/02 职场文书
群众路线教育实践活动方案
2014/02/02 职场文书
酒店管理毕业生自我鉴定
2014/03/02 职场文书
民生工程实施方案
2014/03/22 职场文书
医药销售自我评价200字
2014/09/11 职场文书
2014领导干部学习焦裕禄同志先进事迹思想汇报
2014/09/19 职场文书
2014年学校法制宣传日活动总结
2014/11/01 职场文书
纪委立案决定书
2015/06/24 职场文书
HTML实现仿Windows桌面主题特效的实现
2022/06/28 HTML / CSS