jQuery中event.target和this的区别详解


Posted in jQuery onAugust 13, 2020

this和event.target的区别:

1.js中事件是会冒泡的,所以this是可以变化的,但event.target不会变化,它永远指向触发事件的DOM元素本身;

2.this和event.target都是dom对象,使用jQuey中的方法可以将他们转换为jquery对象:$(this)和$(event.target).

比如,一个很简单的例子.

$(event.target)指向触发事件的元素. 当点击蓝色小方框时, 蓝色小方框会变成橙色, 但其外围的大方框不会变色, 即没有触发事件的冒泡行为.

点击前: jQuery中event.target和this的区别详解 点击后: jQuery中event.target和this的区别详解

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
  *{
  margin: 0;
  padding: 0;
  }
  #big {
  width: 200px;
  height: 200px;
  background-color: gray;
  }
  #small {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin: 0 auto;
  }
 </style>
 </head>
 <body>
 <div id="big">
 <div id="small"></div>
 </div>
 <script src="js/jquery-2.2.4.min.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
 $("div, input").click(function (event) {
  $(event.target).css("background-color", "orange");
 });
 </script>
 </body>
</html>

$(this)指向触发事件的元素. 当点击蓝色小方框时,蓝色小方框会变橙色, 同时其外围的灰色大方框也会变成橙色, 也就是说当用this获取触发事件的元素会引起事件的冒泡.

点击前: jQuery中event.target和this的区别详解 点击后: jQuery中event.target和this的区别详解

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
  *{
  margin: 0;
  padding: 0;
  }
  #big {
  width: 200px;
  height: 200px;
  background-color: gray;
  }
  #small {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin: 0 auto;
  }
 </style>
 </head>
 <body>
 <div id="big">
 <div id="small"></div>
 </div>
 <script src="js/jquery-2.2.4.min.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
 $("div, input").click(function () {
  $(this).css("background-color", "orange");
 })
 </script>
 </body>
</html>

例二

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>

this是Javascript语言的一个关键字。

this代表函数运行时,自动生成的一个内部对象,只能在函数内部使用。

this和event.target的区别:

js中事件是会冒泡的,所以this是可以变化的,但event.target不会变化(在事件触发时,只传递当前event对象的引用),它永远是直接接受事件的目标DOM元素;

另外,this和event.target都是dom对象,如果要使用jquey中的方法可以将他们转换为jquery对象:$(this)和$(event.target);

到此这篇关于jQuery中event.target和this的区别详解的文章就介绍到这了,更多相关jQuery中event.target和this内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

jQuery 相关文章推荐
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 jQuery
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
jQuery 改变P标签文本值方法
Feb 24 jQuery
jQuery中的for循环var与let的区别
Apr 21 jQuery
jQuery实现遍历XML节点和属性的方法示例
Apr 29 jQuery
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 jQuery
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
jquery的$().each和$.each的区别
Jan 18 jQuery
详解jQuery-each()方法
Mar 13 jQuery
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
jQuery实现滑动开关效果
Aug 02 jQuery
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 #jQuery
Jquery cookie插件实现原理代码解析
Aug 04 #jQuery
jQuery实现雪花飘落效果
Aug 02 #jQuery
jQuery实现滑动开关效果
Aug 02 #jQuery
jQuery实现开关灯效果
Aug 02 #jQuery
jquery轮播图插件使用方法详解
Jul 31 #jQuery
jQuery带控制按钮轮播图插件
Jul 31 #jQuery
You might like
咖啡机如何保养和日常清洁?
2021/03/03 冲泡冲煮
PHP 实例化类的一点摘记
2008/03/23 PHP
编写PHP程序检查字符串中的中文字符个数的实例分享
2016/03/17 PHP
thinkphp5框架路由原理与用法详解
2020/02/11 PHP
JS无限树状列表实现代码
2011/01/11 Javascript
Javascript查询DBpedia小应用实例学习
2013/03/07 Javascript
浅析js中2个等号与3个等号的区别
2013/08/06 Javascript
使用jQuery异步加载 JavaScript脚本解决方案
2014/04/20 Javascript
JQuery.Ajax()的data参数类型实例详解
2015/11/20 Javascript
JavaScript SweetAlert插件实现超酷消息警告框
2016/01/28 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
2016/09/17 Javascript
在 Angular2 中实现自定义校验指令(确认密码)的方法
2017/01/23 Javascript
vue实现模态框的通用写法推荐
2018/02/26 Javascript
详解Vue内部怎样处理props选项的多种写法
2018/11/06 Javascript
JavaScript实现简单轮播图效果
2018/12/01 Javascript
elementUI table表格动态合并的示例代码
2019/05/15 Javascript
js的新生代垃圾回收知识点总结
2019/08/22 Javascript
Python RuntimeError: thread.__init__() not called解决方法
2015/04/28 Python
对numpy.append()里的axis的用法详解
2018/06/28 Python
Python中文件的写入读取以及附加文字方法
2019/01/23 Python
python2 中 unicode 和 str 之间的转换及与python3 str 的区别
2019/07/25 Python
扩展Django admin的list_filter()可使用范围方法
2019/08/21 Python
PyQt5+Caffe+Opencv搭建人脸识别登录界面
2019/08/28 Python
Django模板标签中url使用详解(url跳转到指定页面)
2020/03/19 Python
Python如何避免文件同名产生覆盖
2020/06/09 Python
matplotlib 范围选区(SpanSelector)的使用
2021/02/24 Python
css3 border旋转时的动画应用
2016/01/22 HTML / CSS
戴尔荷兰官方网站:Dell荷兰
2020/10/04 全球购物
公司中层干部的自我评价分享
2014/03/01 职场文书
住宅质量保证书
2014/04/29 职场文书
市政工程技术专业自荐书
2014/07/06 职场文书
飞机制造技术专业求职信
2014/07/27 职场文书
公司员工违法违章行为检讨书
2019/06/24 职场文书
建国70周年的心得体会(2篇)
2019/09/20 职场文书
Python实现学生管理系统(面向对象版)
2021/06/24 Python
Windows server 2012 R2 安装IIS服务器
2022/04/29 Servers