基于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写的日历(代码部分网摘)
Sep 20 Javascript
JavaScript 组件之旅(四):测试 JavaScript 组件
Oct 28 Javascript
Dom 是什么的详细说明
Oct 25 Javascript
JavaScript可否多线程? 深入理解JavaScript定时机制
May 23 Javascript
js类式继承的具体实现方法
Dec 31 Javascript
JavaScript中Number.MAX_VALUE属性的使用方法
Jun 04 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
May 13 Javascript
vue开发心得和技巧分享
Oct 27 Javascript
BootStrap 模态框实现刷新网页并关闭功能
Jan 04 Javascript
小程序数据通信方法大全(推荐)
Apr 15 Javascript
Vuex中的Mutations的具体使用方法
Jun 01 Javascript
Js图片点击切换轮播实现代码
Jul 27 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
php正则表达式(regar expression)
2011/09/10 PHP
PHP新手用的Insert和Update语句构造类
2012/03/31 PHP
phpStudy访问速度慢和启动失败的解决办法
2015/11/19 PHP
PHP实现原比例生成缩略图的方法
2016/02/03 PHP
PHP实现chrome表单请求数据转换为接口使用的json数据
2021/03/04 PHP
打开超链需要“确认”对话框的方法
2007/03/08 Javascript
跨浏览器开发经验总结(四) 怎么写入剪贴板
2010/05/13 Javascript
javasctipt如何显示几分钟前、几天前等
2014/04/30 Javascript
jQuery中addClass()方法用法实例
2015/01/05 Javascript
简介JavaScript中的unshift()方法的使用
2015/06/09 Javascript
JavaScript &amp; jQuery完美判断图片是否加载完毕
2017/01/08 Javascript
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
2017/03/04 Javascript
jQuery超简单遮罩层实现方法示例
2018/09/06 jQuery
微信小程序生成二维码的示例代码
2019/03/29 Javascript
createObjectURL方法实现本地图片预览
2019/09/30 Javascript
独特的python循环语句
2016/11/20 Python
Python中的__slots__示例详解
2017/07/06 Python
django创建自定义模板处理器的实例详解
2017/08/14 Python
Python绑定方法与非绑定方法详解
2017/08/18 Python
Python语言实现百度语音识别API的使用实例
2017/12/13 Python
Python中asyncio与aiohttp入门教程
2018/10/16 Python
python使用递归的方式建立二叉树
2019/07/03 Python
Python threading.local代码实例及原理解析
2020/03/16 Python
用python制作个视频下载器
2021/02/01 Python
python 基于pygame实现俄罗斯方块
2021/03/02 Python
HTML5 标准将把互联网视频扔回到黑暗时代
2010/02/10 HTML / CSS
路易威登和香奈儿手袋:LuxeDH
2017/01/12 全球购物
英国领先的品牌珠宝和配件供应商:Acotis Jewellery
2018/03/07 全球购物
韩国演唱会订票网站:StubHub韩国
2019/01/17 全球购物
教师辞职报告范文
2014/01/20 职场文书
关于对大人不礼貌的检讨书
2014/09/29 职场文书
2014旅游局党组书记党建工作汇报材料
2014/11/02 职场文书
学术研讨会主持词
2015/07/04 职场文书
大学生暑期实践报告之企业经营管理
2019/08/08 职场文书
mysql脏页是什么
2021/07/26 MySQL
解决Mysql报错 Table 'mysql.user' doesn't exist
2022/05/06 MySQL