基于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 相关文章推荐
jQuery对象[0]是什么含义?
Jul 31 Javascript
jquery加载页面的方法(页面加载完成就执行)
Jun 21 Javascript
基于KMP算法JavaScript的实现方法分析
May 03 Javascript
js操作css属性实现div层展开关闭效果的方法
May 11 Javascript
javascript连续赋值问题
Jul 08 Javascript
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
Sep 14 Javascript
BootStrap轻松实现微信页面开发代码分享
Oct 21 Javascript
巧用Javascript的逻辑运算符
Dec 02 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
Jan 18 Javascript
js弹性势能动画之抛物线运动实例详解
Jul 27 Javascript
Vue下路由History模式打包后页面空白的解决方法
Jun 29 Javascript
js实现tab栏切换效果
Aug 02 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之require/include顺序 推荐
2011/01/02 PHP
PHP+jQuery 注册模块开发详解
2014/10/14 PHP
php格式化时间戳显示友好的时间实现思路及代码
2014/10/23 PHP
为PHP5.4开启Zend OPCode缓存
2014/12/26 PHP
PHP实现连接设备、通讯和发送命令的方法
2015/10/13 PHP
php性能分析之php-fpm慢执行日志slow log用法浅析
2016/10/17 PHP
php mysql like 实现多关键词搜索的方法
2016/10/29 PHP
PHP中Trait及其应用详解
2017/02/14 PHP
深入讲解PHP的对象注入(Object Injection)
2017/03/01 PHP
ThinkPHP5.1表单令牌Token失效问题的解决
2019/03/22 PHP
关于js类的定义
2011/06/28 Javascript
学习javascript,实现插入排序实现代码
2011/07/31 Javascript
js如何实现淡入淡出效果
2020/11/18 Javascript
Angular2 环境配置详细介绍
2016/09/21 Javascript
AngularJS入门教程之Helloworld示例
2016/12/25 Javascript
使用vue.js写一个tab选项卡效果
2017/03/25 Javascript
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
2017/09/14 Javascript
利用jsonp与代理服务器方案解决跨域问题
2017/09/14 Javascript
node.js将MongoDB数据同步到MySQL的步骤
2017/12/10 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
2020/10/30 Javascript
使用js原生实现年份轮播选择效果实例
2021/01/12 Javascript
Python使用scrapy采集时伪装成HTTP/1.1的方法
2015/04/08 Python
Python generator生成器和yield表达式详解
2019/08/08 Python
python3.8与pyinstaller冲突问题的快速解决方法
2020/01/16 Python
Python实现ElGamal加密算法的示例代码
2020/06/19 Python
纯CSS3绘制打火机动画火焰效果
2016/07/18 HTML / CSS
html5指南-7.geolocation结合google maps开发一个小的应用
2013/01/07 HTML / CSS
德国运动鞋网上商店:Afew Store
2018/01/05 全球购物
教师的实习鉴定
2013/12/15 职场文书
经济贸易系求职信
2014/08/04 职场文书
小学国旗下的演讲稿
2014/08/28 职场文书
社区灵活就业证明
2014/11/03 职场文书
2014年保洁员工作总结
2014/11/19 职场文书
初中生思想道德自我评价
2015/03/09 职场文书
销售员自我评价
2015/03/11 职场文书
2015年护士长个人工作总结
2015/04/24 职场文书