基于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 相关文章推荐
通用JS事件写法实现代码
Jan 07 Javascript
两个select之间option的互相添加操作(jquery实现)
Nov 12 Javascript
jQuery使用动态渲染表单功能完成ajax文件下载
Jan 15 Javascript
iframe的onreadystatechange事件在firefox下的使用
Apr 16 Javascript
javascript中innerText和innerHTML属性用法实例分析
May 13 Javascript
微信企业号开发之微信考勤Cookies的使用
Sep 11 Javascript
JS 拼凑字符串的简单实例
Sep 02 Javascript
JavaScript随机生成颜色的方法
Oct 15 Javascript
教你用十行node.js代码读取docx的文本
Mar 08 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
Nov 06 Javascript
JS实现li标签的删除
Apr 12 Javascript
使用微信SDK自定义分享的方法
Jul 03 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
解析MySql与Java的时间类型
2013/06/22 PHP
ThinkPHP调用common/common.php函数提示错误function undefined的解决方法
2014/08/25 PHP
thinkphp3.2.2前后台公用类架构问题分析
2014/11/25 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
PHP实现的pdo连接数据库并插入数据功能简单示例
2019/03/30 PHP
javascript 文件的同步加载与异步加载实现原理
2012/12/13 Javascript
JS实现新浪微博效果带遮罩层的弹出框代码
2015/10/12 Javascript
基于JavaScript的操作系统你听说过吗?
2016/01/28 Javascript
使用three.js 画渐变的直线
2016/06/05 Javascript
Javascript中判断一个值是否为undefined的方法详解
2016/09/28 Javascript
bootstrap导航、选项卡实现代码
2016/12/28 Javascript
jQuery实现动态给table赋值的方法示例
2017/07/04 jQuery
ES6 中可以提升幸福度的小功能
2018/08/06 Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
2018/08/16 Javascript
详解离线安装npm包的几种方法
2018/11/25 Javascript
微信小程序实现文件、图片上传功能
2020/08/18 Javascript
JS如何实现动态添加的元素绑定事件
2019/11/12 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
2020/03/09 Javascript
[01:21]DOTA2周边文化主题展 神秘商店火热开售
2017/07/30 DOTA
python处理json数据中的中文
2014/03/06 Python
基于python脚本实现软件的注册功能(机器码+注册码机制)
2016/10/09 Python
Django的HttpRequest和HttpResponse对象详解
2018/01/26 Python
总结Python图形用户界面和游戏开发知识点
2019/05/22 Python
Pytorch Tensor 输出为txt和mat格式方式
2020/01/03 Python
Python参数传递对象的引用原理解析
2020/05/22 Python
基于CSS3实现的几个小loading效果
2018/09/27 HTML / CSS
localStorage的过期时间设置的方法详解
2018/11/26 HTML / CSS
了解AppleShare protocol(AppleShare协议)吗
2015/08/28 面试题
总经理办公室主任岗位职责
2013/11/12 职场文书
委托证明书
2014/09/17 职场文书
会计试用期自我评价
2014/09/19 职场文书
服务承诺书
2015/01/19 职场文书
2019客服个人年终工作总结范文
2019/07/08 职场文书
浅谈redis缓存在项目中的使用
2021/05/20 Redis
关于Spring配置文件加载方式变化引发的异常详解
2022/01/18 Java/Android
Java Spring Boot请求方式与请求映射过程分析
2022/06/25 Java/Android