基于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中eval函数的使用方法与示例
Apr 09 Javascript
js判断输入是否为正整数、浮点数等数字的函数代码
Nov 17 Javascript
用JavaScript计算在UTF-8下存储字符串占用字节数
Aug 08 Javascript
jQuery针对各类元素操作基础教程
Aug 29 Javascript
JavaScript原生对象之Number对象的属性和方法详解
Mar 13 Javascript
jquery编写Tab选项卡滚动导航切换特效
Jul 17 Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
Sep 04 Javascript
vue-scroller记录滚动位置的示例代码
Jan 17 Javascript
angularJs-$http实现百度搜索时的动态下拉框示例
Feb 27 Javascript
微信小程序中悬浮窗功能的实现代码
Aug 02 Javascript
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
Aug 04 Javascript
vue 表单输入框不支持focus及blur事件的解决方案
Nov 17 Vue.js
浅谈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
写一个用户在线显示的程序
2006/10/09 PHP
最新制作ThinkPHP3.2.3完全开发手册
2015/11/23 PHP
Laravel5.1 框架表单验证操作实例详解
2020/01/07 PHP
js综合应用实例简单的表格统计
2013/09/03 Javascript
node.js中的fs.readdirSync方法使用说明
2014/12/17 Javascript
浅谈jquery高级方法描述与应用
2016/10/04 Javascript
bootstrap下拉列表与输入框组结合的样式调整
2016/10/08 Javascript
vue的props实现子组件随父组件一起变化
2016/10/27 Javascript
获取JavaScript异步函数的返回值
2016/12/21 Javascript
jQuery Ajax前后端使用JSON进行交互示例
2017/03/17 Javascript
jqgrid实现简单的单行编辑功能
2017/09/30 Javascript
Node.js应用设置安全的沙箱环境
2018/04/23 Javascript
基于Vue2实现简易的省市区县三级联动组件效果
2018/11/05 Javascript
详解微信小程序之一键复制到剪切板
2019/04/24 Javascript
微信小程序中显示倒计时代码实例
2019/05/09 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
2019/07/26 jQuery
基于ts的动态接口数据配置的详解
2019/12/18 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
2020/05/15 Javascript
[05:56]第十六期——新进3大C之小兔基
2014/06/24 DOTA
简单文件操作python 修改文件指定行的方法
2013/05/15 Python
通过C++学习Python
2015/01/20 Python
Python三级菜单的实例
2017/09/13 Python
python爬虫_微信公众号推送信息爬取的实例
2017/10/23 Python
Python实现定时精度可调节的定时器
2018/04/15 Python
python画图系列之个性化显示x轴区段文字的实例
2018/12/13 Python
对python打乱数据集中X,y标签对的方法详解
2018/12/14 Python
Python在Matplotlib图中显示中文字体的操作方法
2019/07/29 Python
树莓派4B+opencv4+python 打开摄像头的实现方法
2019/10/18 Python
python GUI库图形界面开发之PyQt5窗口类QMainWindow详细使用方法
2020/02/26 Python
python使用hdfs3模块对hdfs进行操作详解
2020/06/06 Python
Django自定义YamlField实现过程解析
2020/11/11 Python
英国电视和家用电器购物网站:rlrdistribution.co.uk
2018/11/20 全球购物
求职面试个人自我评价
2014/02/28 职场文书
群众路线教育实践活动调研报告
2014/11/03 职场文书
合同权益转让协议书模板
2014/11/18 职场文书
军事博物馆观后感
2015/06/05 职场文书