基于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 相关文章推荐
Extjs TimeField 显示正常时间格式的代码
Jun 28 Javascript
JS使用parseInt解析数字实现求和的方法
Aug 05 Javascript
JS实现黑色大气的二级导航菜单效果
Sep 18 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
Sep 20 Javascript
JavaScript页面实时显示当前时间实例代码
Oct 23 Javascript
ES6正则表达式的一些新功能总结
May 09 Javascript
SpringMVC+bootstrap table实例详解
Jun 02 Javascript
js和jQuery以及easyui实现对下拉框的指定赋值方法
Jan 23 jQuery
关于Vue在ie10下空白页的debug小结
May 02 Javascript
vue2.0 路由模式mode=&quot;history&quot;的作用
Oct 18 Javascript
使用Vue.js和MJML创建响应式电子邮件
Mar 23 Vue.js
Vue OpenLayer测距功能的实现
Apr 20 Vue.js
浅谈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
用PHP实现的随机广告显示代码
2007/06/14 PHP
PHP中用正则表达式清除字符串的空白
2011/01/17 PHP
PHP操作mysql数据库分表的方法
2016/06/09 PHP
JavaScript 权威指南(第四版) 读书笔记
2009/08/11 Javascript
ie6下png图片背景不透明的解决办法使用js实现
2013/01/11 Javascript
new Date()问题在ie8下面的处理方法
2014/07/31 Javascript
酷炫jQuery全屏3D焦点图动画效果
2016/03/22 Javascript
全面了解构造函数继承关键apply call
2016/07/26 Javascript
基于vue,vue-router, vuex及addRoutes进行权限控制问题
2018/05/02 Javascript
vue 国际化 vue-i18n 双语言 语言包
2018/06/07 Javascript
详解JS中统计函数执行次数与执行时间
2018/09/04 Javascript
一个因@click.stop引发的bug的解决
2019/01/08 Javascript
记录vue项目中遇到的一点小问题
2019/05/14 Javascript
解决vuex数据页面刷新后初始化操作
2020/07/26 Javascript
[01:15:00]LGD vs Mineski Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
caffe binaryproto 与 npy相互转换的实例讲解
2018/07/09 Python
python用插值法绘制平滑曲线
2021/02/19 Python
python的pytest框架之命令行参数详解(下)
2019/06/27 Python
python网络编程之多线程同时接受和发送
2019/09/03 Python
python bluetooth蓝牙信息获取蓝牙设备类型的方法
2019/11/29 Python
解决pyinstaller打包运行程序时出现缺少plotly库问题
2020/06/02 Python
法国二手手袋、手表和奢侈珠宝购物网站:Collector Square
2018/07/05 全球购物
馥绿德雅美国官方网站:Rene Furterer头皮护理专家
2019/05/01 全球购物
Intersport西班牙:在线体育商店
2019/11/06 全球购物
高中军训感言600字
2014/03/11 职场文书
销售经理岗位职责
2014/03/16 职场文书
法院信息化建设方案
2014/05/21 职场文书
八项规定对照检查材料
2014/08/31 职场文书
企业党员个人自我评价
2014/09/20 职场文书
公司庆典欢迎词
2015/01/26 职场文书
给老婆的检讨书
2015/01/27 职场文书
会计求职自荐信范文
2015/03/04 职场文书
通知函格式范文
2015/04/27 职场文书
卫生院义诊活动总结
2015/05/07 职场文书
《最后一头战象》读后感:动物也有感情
2020/01/02 职场文书
使用pycharm运行flask应用程序的详细教程
2021/06/07 Python