基于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 相关文章推荐
javascript实现的鼠标链接提示效果生成器代码
Jun 28 Javascript
js 弹出框 替代浏览器的弹出框
Oct 29 Javascript
解析瀑布流布局:JS+绝对定位的实现
May 08 Javascript
JS动态添加与删除select中的Option对象(示例代码)
Dec 20 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
Feb 07 Javascript
JQuery给元素绑定click事件多次执行的解决方法
May 29 Javascript
CSS javascript 结合实现悬浮固定菜单效果
Aug 23 Javascript
JavaScript实现Base64编码转换
Apr 23 Javascript
基于Vue.js实现简单搜索框
Mar 26 Javascript
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
Jul 30 Javascript
vue中eventbus被多次触发以及踩过的坑
Dec 02 Javascript
基于js实现判断浏览器类型代码实例
Jul 17 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实现的Redis多库选择功能单例类
2017/07/27 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
[原创]图片分页查看
2006/08/28 Javascript
关于div自适应高度/左右高度自适应一致的js代码
2013/03/22 Javascript
jquery制作居中遮罩层效果分享
2014/02/21 Javascript
PHP PDO操作总结
2014/11/17 Javascript
Javascript实现多彩雪花从天降散落效果的方法
2015/02/02 Javascript
JavaScript针对网页节点的增删改查用法实例
2015/02/02 Javascript
基于Bootstrap重置输入框内容按钮插件
2016/05/12 Javascript
JavaScript面向对象分层思维全面解析
2016/11/22 Javascript
浅谈jquery的html方法里包含特殊字符的处理
2016/11/30 Javascript
Bootstrap基本插件学习笔记之模态对话框(16)
2016/12/08 Javascript
JavaScript解析JSON格式数据的方法示例
2017/01/24 Javascript
详解nodejs微信公众号开发——3.封装消息响应模块
2017/04/10 NodeJs
尝试自己动手用react来写一个分页组件(小结)
2018/02/09 Javascript
Angular Renderer (渲染器)的具体使用
2018/05/03 Javascript
js+springMVC 提交数组数据到后台的实例
2019/09/21 Javascript
国内常用的js类库大全(CDN公共库)
2020/06/24 Javascript
python爬取淘宝商品详情页数据
2018/02/23 Python
Python数据分析库pandas基本操作方法
2018/04/08 Python
python中退出多层循环的方法
2018/11/27 Python
python 从文件夹抽取图片另存的方法
2018/12/04 Python
使用Python检测文章抄袭及去重算法原理解析
2019/06/14 Python
python中下标和切片的使用方法解析
2019/08/27 Python
Django实现CAS+OAuth2的方法示例
2019/10/30 Python
Python箱型图处理离群点的例子
2019/12/09 Python
python中用Scrapy实现定时爬虫的实例讲解
2021/01/18 Python
python爬虫爬取某网站视频的示例代码
2021/02/20 Python
欧洲最大的滑雪假期供应商之一:Sunweb Holidays
2018/01/06 全球购物
阿姆斯特丹杜莎夫人蜡像馆官方网站:Madame Tussauds Amsterdam
2019/03/12 全球购物
牧马人澳大利亚官网:Wrangler澳大利亚
2019/10/08 全球购物
LVMH旗下最大的奢侈品网站平台:24S
2020/05/24 全球购物
料理师求职信
2014/01/30 职场文书
2014年标准化工作总结
2014/12/17 职场文书
红高粱观后感
2015/06/10 职场文书
抖音动画片,皮皮虾,《治愈系》动画在用这首REMIX作为背景音乐,Anak ,The last world with you完整版
2022/03/16 杂记