基于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 相关文章推荐
一些mootools的学习资源
Feb 07 Javascript
jquery 元素相对定位代码
Oct 15 Javascript
jquery下jstree简单应用 - v1.0
Apr 14 Javascript
JQuery Highcharts 动态生成图表的方法
Nov 15 Javascript
javascript DIV实现跟随鼠标移动
Mar 19 Javascript
vue router下的html5 history在iis服务器上的设置方法
Oct 18 Javascript
vue轮播图插件vue-concise-slider的使用
Mar 13 Javascript
详解vue 数据传递的方法
Apr 19 Javascript
使用vue-cli打包过程中的步骤以及问题的解决
May 08 Javascript
vue单页缓存方案分析及实现
Sep 25 Javascript
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
Sep 11 Javascript
基于javascript处理二进制图片流过程详解
Jun 08 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/03/11 PHP
PHP中extract()函数的妙用分析
2012/07/11 PHP
PHP的Laravel框架结合MySQL与Redis数据库的使用部署
2016/03/21 PHP
php多文件打包下载的实例代码
2017/07/12 PHP
PHP如何实现订单的延时处理详解
2017/12/30 PHP
PHP 对象继承原理与简单用法示例
2020/04/21 PHP
PHP手机号码及邮箱正则表达式实例解析
2020/07/11 PHP
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
2010/05/06 Javascript
JavaScript面向对象(极简主义法minimalist approach)
2012/07/17 Javascript
JavaScript定时器详解及实例
2013/08/01 Javascript
js 实现的可折叠留言板(附源码下载)
2014/07/01 Javascript
js使用html()或text()方法获取设置p标签的显示的值
2014/08/01 Javascript
js实现遮罩层弹出框的方法
2015/01/15 Javascript
jquery实现鼠标滑过后动态图片提示效果实例
2015/08/10 Javascript
Vue.js仿Metronic高级表格(一)静态设计
2017/04/17 Javascript
解决Angular4项目部署到服务器上刷新404的问题
2018/08/31 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
2019/06/19 Javascript
JavaScript 自定义html元素鼠标右键菜单功能
2019/12/02 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
2020/07/22 Javascript
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
2020/10/29 Javascript
[36:20]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.17
2020/12/18 DOTA
python 打印出所有的对象/模块的属性(实例代码)
2016/09/11 Python
解决Pycharm无法import自己安装的第三方module问题
2018/05/18 Python
Python格式化输出字符串方法小结【%与format】
2018/10/29 Python
详解python-图像处理(映射变换)
2019/03/22 Python
Python的bit_length函数来二进制的位数方法
2019/08/27 Python
python3.7 利用函数os pandas利用excel对文件名进行归类
2019/09/29 Python
python3.x 生成3维随机数组实例
2019/11/28 Python
Python hashlib模块的使用示例
2020/10/09 Python
详解python的super()的作用和原理
2020/10/29 Python
Python从MySQL数据库中面抽取试题,生成试卷
2021/01/14 Python
客房主管岗位职责
2013/12/09 职场文书
市委常委会班子党的群众路线教育实践活动整改方案
2014/10/25 职场文书
委托函范文
2015/01/29 职场文书
2016大学生社会实践单位评语
2015/12/01 职场文书
Tomcat用户管理的优化配置详解
2022/03/31 Servers