基于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 相关文章推荐
node.js 一个简单的页面输出实现代码
Mar 07 Javascript
poshytip 基于jquery的 插件 主要用于显示微博人的图像和鼠标提示等
Oct 12 Javascript
JS实现随机乱撞彩色圆球特效的方法
May 05 Javascript
浅谈javascript的call()、apply()、bind()的用法
Feb 21 Javascript
js当前页面登录注册框,固定div,底层阴影的实例代码
Oct 04 Javascript
js实现交通灯效果
Jan 13 Javascript
AngularJS $http模块POST请求实现
Apr 08 Javascript
捕获未处理的Promise错误方法
Oct 13 Javascript
基于angular6.0实现的一个组件懒加载功能示例
Apr 12 Javascript
VUE预渲染及遇到的坑
Sep 03 Javascript
Vue插件之滑动验证码
Sep 21 Javascript
在vant 中使用cell组件 定义图标该图片和位置操作
Nov 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
日本因肺炎疫情影响,这几部动漫推延播放!
2020/03/03 日漫
PHP编写简单的App接口
2016/08/28 PHP
利用javascript实现一些常用软件的下载导航
2009/08/03 Javascript
两个Javascript小tip资料
2010/11/23 Javascript
jQuery设置div一直在页面顶部显示的方法
2013/10/24 Javascript
JS实现点击链接取消跳转效果的方法
2014/01/24 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/09/29 Javascript
jQuery编写设置和获取颜色的插件
2017/01/09 Javascript
bootstrap精简教程_动力节点Java学院整理
2017/07/14 Javascript
Vue自定义事件(详解)
2017/08/19 Javascript
如何抽象一个Vue公共组件
2017/10/17 Javascript
vue引用js文件的多种方式(推荐)
2018/05/17 Javascript
微信小程序实现多个按钮的颜色状态转换
2019/02/15 Javascript
Nuxt.js nuxt-link与router-link的区别说明
2020/11/06 Javascript
python学习数据结构实例代码
2015/05/11 Python
Python正则表达式实现截取成对括号的方法
2017/01/06 Python
Python运算符重载详解及实例代码
2017/03/07 Python
对pytorch网络层结构的数组化详解
2018/12/08 Python
python如何爬取网站数据并进行数据可视化
2019/07/08 Python
python flask web服务实现更换默认端口和IP的方法
2019/07/26 Python
python 定义类时,实现内部方法的互相调用
2019/12/25 Python
Tensorflow 自定义loss的情况下初始化部分变量方式
2020/01/06 Python
python 用opencv实现图像修复和图像金字塔
2020/11/27 Python
python 实现波浪滤镜特效
2020/12/02 Python
css3 2D图片转动样式可以扩充到Js当中
2014/04/29 HTML / CSS
Html5新增标签有哪些
2017/04/13 HTML / CSS
应届毕业生个人自我评价
2013/09/20 职场文书
给医务人员表扬信
2014/01/12 职场文书
暑期社会实践个人总结
2015/03/06 职场文书
陈斌强事迹观后感
2015/06/17 职场文书
Pandas 稀疏数据结构的实现
2021/07/25 Python
关于k8s环境部署mysql主从的问题
2022/03/13 MySQL
如何用六步教会你使用python爬虫爬取数据
2022/04/06 Python
动态规划之使用备忘录来改进Javascript函数
2022/04/07 Javascript
鲲鹏 CentOS 7 安装Python3.7
2022/05/11 Servers
SpringBoot详解执行过程
2022/07/15 Java/Android