基于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实现异步刷新的代码(转载)
Mar 29 Javascript
基于javascript 闭包基础分享
Jul 10 Javascript
探讨JavaScript中的Rest参数和参数默认值
Jul 29 Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
Sep 20 Javascript
用JS生成UUID的方法实例
Mar 30 Javascript
D3.js实现文本的换行详解
Oct 14 Javascript
jQuery post数据至ashx实例详解
Nov 18 Javascript
node.js+jQuery实现用户登录注册AJAX交互
Apr 28 jQuery
微信小程序实现登录页云层漂浮的动画效果
May 05 Javascript
你可能不知道的JSON.stringify()详解
Aug 17 Javascript
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
Aug 23 Javascript
JavaScript中的this/call/apply/bind的使用及区别
Mar 06 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
一个显示天气预报的程序
2006/10/09 PHP
php4的session功能评述(一)
2006/10/09 PHP
Smarty+QUICKFORM小小演示
2007/02/25 PHP
PHP大小写问题:函数名和类名不区分,变量名区分
2013/06/17 PHP
php读取图片内容并输出到浏览器的实现代码
2013/08/08 PHP
php中文验证码实现方法
2015/06/18 PHP
php+ajax实现异步上传文件或图片功能
2017/07/18 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
根据邮箱的域名跳转到相应的登录页面的代码
2012/02/27 Javascript
12款经典的白富美型—jquery图片轮播插件—前端开发必备
2013/01/08 Javascript
js自定义方法通过隐藏iframe实现文件下载
2013/02/21 Javascript
node.js中的fs.appendFile方法使用说明
2014/12/17 Javascript
js带缩略图的图片轮播效果代码分享
2015/09/14 Javascript
javascript设计模式--策略模式之输入验证
2015/11/27 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
2016/02/20 Javascript
ES6中Iterator与for..of..遍历用法分析
2017/03/31 Javascript
js提取中文拼音首字母的封装工具类
2018/03/12 Javascript
JS实现的缓冲运动效果示例
2018/04/30 Javascript
微信小程序实现锚点功能
2019/11/20 Javascript
Node.js API详解之 tty功能与用法实例分析
2020/04/27 Javascript
js 数组当前行添加数据方法详解
2020/07/28 Javascript
使用Python编写一个在Linux下实现截图分享的脚本的教程
2015/04/24 Python
python常见排序算法基础教程
2017/04/13 Python
python爬虫_微信公众号推送信息爬取的实例
2017/10/23 Python
如何使用Python实现自动化水军评论
2019/06/26 Python
Python画图实现同一结点多个柱状图的示例
2019/07/07 Python
Python简单处理坐标排序问题示例
2019/07/11 Python
Python爬虫实现自动登录、签到功能的代码
2020/08/20 Python
纯CSS3实现手风琴风格菜单具体步骤
2013/05/06 HTML / CSS
澳大利亚宠物商店:Petbarn
2017/11/18 全球购物
2015年度优秀员工自荐书
2015/03/06 职场文书
2015年国庆节广播稿
2015/08/19 职场文书
Python数据分析入门之数据读取与存储
2021/05/13 Python
Nginx使用Lua模块实现WAF的原理解析
2021/09/04 Servers
vue3获取当前路由地址
2022/02/18 Vue.js
详解OpenCV曝光融合
2022/04/29 Python