基于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方法简洁实现隔行换色及toggleClass的使用
Mar 15 Javascript
解析javascript 数组以及json元素的添加删除
Jun 26 Javascript
根据user-agent判断蜘蛛代码黑帽跳转代码(js版与php版本)
Sep 14 Javascript
jquery实现的V字形显示效果代码
Oct 27 Javascript
js 动态添加元素(div、li、img等)及设置属性的方法
Jul 19 Javascript
基于Javascript实现文件实时加载进度的方法
Oct 12 Javascript
Node.js开启Https的实践详解
Oct 25 Javascript
引入JavaScript时alert弹出框显示中文乱码问题
Sep 16 Javascript
vue+webpack实现异步加载三种用法示例详解
Apr 24 Javascript
30分钟快速实现小程序语音识别功能
Nov 27 Javascript
小程序实现日历左右滑动效果
Oct 21 Javascript
详解CocosCreator消息分发机制
Apr 16 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中的时间显示
2007/01/18 PHP
php url地址栏传中文乱码解决方法集合
2010/06/25 PHP
用PHP实现的四则运算表达式计算实现代码
2011/08/02 PHP
PHP 文本文章分页代码 按标记或长度(不涉及数据库)
2012/06/07 PHP
在SAE上搭建最新wordpress的方法
2014/12/21 PHP
两种php去除二维数组的重复项方法
2015/11/04 PHP
PHP中的随机性 你觉得自己幸运吗?
2016/01/22 PHP
PHP文件操作详解
2016/12/30 PHP
总结一些PHP中好用但又容易忽略的小知识
2017/06/02 PHP
PHP命名空间定义与用法实例分析
2019/08/14 PHP
JS的事件绑定深入认识
2014/06/26 Javascript
JavaScript学习心得之概述
2015/01/20 Javascript
javascript跑马灯抽奖实例讲解
2020/04/17 Javascript
AngularJS 整理一些优化的小技巧
2016/08/18 Javascript
Angular 4.x 路由快速入门学习
2017/05/03 Javascript
bootstrap响应式表格实例详解
2017/05/15 Javascript
JavaScript高级函数应用之分时函数实例分析
2018/08/03 Javascript
微信小程序实现弹出层效果
2020/05/26 Javascript
详解vantUI框架在vue项目中的应用踩坑
2018/12/06 Javascript
vue组件之间数据传递的方法实例分析
2019/02/12 Javascript
vue登录以及权限验证相关的实现
2019/10/25 Javascript
python之wxPython菜单使用详解
2014/09/28 Python
解决python3 Pycharm上连接数据库时报错的问题
2018/12/03 Python
对django xadmin自定义菜单的实例详解
2019/01/03 Python
Python-copy()与deepcopy()区别详解
2019/07/12 Python
python多线程分块读取文件
2019/08/29 Python
Python Socketserver实现FTP文件上传下载代码实例
2020/03/27 Python
pycharm中选中一个单词替换所有重复单词的实现方法
2020/11/17 Python
java字符串格式化输出实例讲解
2021/01/06 Python
微软瑞士官方网站:Microsoft瑞士
2018/04/20 全球购物
台湾租车首选品牌:IWS艾维士租车
2019/05/03 全球购物
Saks Fifth Avenue澳洲/亚太地区:萨克斯第五大道精品百货店
2019/06/09 全球购物
《兰亭集序》教学反思
2014/02/11 职场文书
服务承诺书怎么写
2014/05/24 职场文书
Java存储没有重复元素的数组
2022/04/29 Java/Android
python绘制云雨图raincloud plot
2022/08/05 Python