基于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 ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
Apr 01 Javascript
js控制不同的时间段显示不同的css样式的实例代码
Nov 04 Javascript
js输出阴历、阳历、年份、月份、周示例代码
Jan 29 Javascript
JavaScript的作用域和块级作用域概念理解
Sep 21 Javascript
jQuery固定元素插件scrolltofixed使用指南
Apr 21 Javascript
node.js路径处理方法以及绝对路径详解
Mar 04 Javascript
学习Node.js模块机制
Oct 17 Javascript
Node.js开发第三方微信公众平台
Jun 05 Javascript
vue.js input框之间赋值方法
Aug 24 Javascript
详解vue组件中使用路由方法
Feb 12 Javascript
ElementUI之Message功能拓展详解
Oct 18 Javascript
为什么JavaScript中0.1 + 0.2 != 0.3
Dec 03 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 高手之路(三)
2006/10/09 PHP
thinkphp路由规则使用示例详解和伪静态功能实现(apache重写)
2014/02/24 PHP
PHP+jQuery 注册模块的改进(一):验证码存入SESSION
2014/10/14 PHP
thinkPHP模型初始化实例分析
2015/12/03 PHP
PHP未登录自动跳转到登录页面
2016/12/21 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
Laravel 修改默认日志文件名称和位置的例子
2019/10/17 PHP
动态控制Table的js代码
2007/03/07 Javascript
基于jquery中children()与find()的区别介绍
2013/04/26 Javascript
node.js中的fs.fchmodSync方法使用说明
2014/12/16 Javascript
javascript中Date format(js日期格式化)方法小结
2015/12/17 Javascript
浅析jQuery 3.0中的Data
2016/06/14 Javascript
JS实现数组去重复值的方法示例
2017/02/18 Javascript
Three.js基础学习之场景对象
2017/09/27 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
2018/02/14 Javascript
vue加载自定义的js文件方法
2018/03/13 Javascript
解决angular2 获取到的数据无法实时更新的问题
2018/08/31 Javascript
JS实现随机生成10个手机号的方法示例
2018/12/07 Javascript
深入理解Node内建模块和对象
2019/03/12 Javascript
原生js+canvas实现下雪效果
2020/08/02 Javascript
使用AutoJs实现微信抢红包的代码
2020/12/31 Javascript
Python基础篇之初识Python必看攻略
2016/06/23 Python
python妙用之编码的转换详解
2017/04/21 Python
Pycharm配置autopep8实现流程解析
2020/11/28 Python
python中常用的数据结构介绍
2021/01/12 Python
css3 position fixed固定居中问题解决方案
2014/08/19 HTML / CSS
英国高级健康和美容产品零售商:Life and Looks
2019/08/01 全球购物
实习生求职自荐信
2014/02/07 职场文书
2014年大班元旦活动方案
2014/02/26 职场文书
教师自我鉴定范文
2014/03/20 职场文书
KTV门卫岗位职责
2014/10/09 职场文书
处级干部考察材料
2014/12/24 职场文书
高中社区服务活动报告
2015/02/05 职场文书
2015年工商所工作总结
2015/05/21 职场文书
2015年度对口支援工作总结
2015/07/22 职场文书
结婚幸福感言
2015/08/01 职场文书