基于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实现连连看游戏(附源码)
Nov 05 Javascript
JS实现的一个简单的Autocomplete自动完成例子
Apr 16 Javascript
JS中frameset框架弹出层实例代码
Apr 01 Javascript
vue2项目使用sass的示例代码
Jun 28 Javascript
js求数组中全部数字可拼接出的最大整数示例代码
Aug 25 Javascript
说说AngularJS中的$parse和$eval的用法
Sep 14 Javascript
layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例
Sep 22 Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
Mar 18 Javascript
详解vue-router数据加载与缓存使用总结
Oct 29 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
Jan 08 Javascript
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
pnpm对npm及yarn降维打击详解
Aug 05 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处理JSON字符串key缺少双引号的解决方法
2014/09/16 PHP
PHP实现C#山寨ArrayList的方法
2015/07/16 PHP
基于JQuery框架的AJAX实例代码
2009/11/03 Javascript
javascript正则表达式中参数g(全局)的作用
2010/11/11 Javascript
Webkit的跨域安全问题说明
2011/09/13 Javascript
Javascript 遮罩层和加载效果代码
2013/08/01 Javascript
javascript函数声明和函数表达式区别分析
2014/12/02 Javascript
JavaScript给按钮绑定点击事件(onclick)的方法
2015/04/07 Javascript
JavaScript iframe数据共享接口实现方法
2016/01/06 Javascript
JavaScript电子时钟倒计时第二款
2016/01/10 Javascript
jQuery 中ajax异步调用的四种方式
2016/06/28 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
2017/07/11 Javascript
Vue内容分发slot(全面解析)
2017/08/19 Javascript
基于js中this和event 的区别(详解)
2017/10/24 Javascript
Angular开发实践之服务端渲染
2018/03/29 Javascript
RxJS的入门指引和初步应用
2019/06/15 Javascript
微信小程序保存图片到相册权限设置
2020/04/09 Javascript
js实现省级联动(数据结构优化)
2020/07/17 Javascript
python中文分词教程之前向最大正向匹配算法详解
2017/11/02 Python
python函数式编程学习之yield表达式形式详解
2018/03/25 Python
Python 批量合并多个txt文件的实例讲解
2018/05/08 Python
PyQt5组件读取参数的实例
2019/06/25 Python
python numpy 反转 reverse示例
2019/12/04 Python
windows下python安装pip方法详解
2020/02/10 Python
VScode连接远程服务器上的jupyter notebook的实现
2020/04/23 Python
Python flask框架实现查询数据库并显示数据
2020/06/04 Python
中国一家综合的外贸B2C电子商务网站:DealeXtreme(DX)
2020/03/10 全球购物
环境科学专业大学生自荐信格式
2013/09/21 职场文书
自强之星事迹材料
2014/05/12 职场文书
机械设计及其自动化专业求职信
2014/06/09 职场文书
商场父亲节活动方案
2014/08/27 职场文书
吃空饷专项整治方案
2014/10/27 职场文书
小学秋季运动会通讯稿
2015/11/25 职场文书
导游词幽默开场白
2019/06/26 职场文书
浅谈python中的多态
2021/06/15 Python
Java 数据结构七大排序使用分析
2022/04/02 Java/Android