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 EasyUI tree增加搜索功能的实现方法
Apr 27 jQuery
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
jQuery扩展_动力节点Java学院整理
Jul 05 jQuery
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 jQuery
jquery实现限制textarea输入字数的方法
Sep 06 jQuery
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
jQuery中库的引用方法
Jan 06 jQuery
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
基于jQuery实现的设置文本区域的光标位置
Jun 15 jQuery
jQuery Migrate 插件用法实例详解
May 22 jQuery
jquery树形插件zTree高级使用详解
Aug 16 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
GBK的页面输出JSON格式的php函数
2010/02/16 PHP
基于asp+ajax和数据库驱动的二级联动菜单
2010/05/06 PHP
替换php字符串中的单引号为双引号的方法
2017/02/16 PHP
php+resumablejs实现的分块上传 断点续传功能示例
2017/04/18 PHP
laravel 解决crontab不执行的问题
2019/10/22 PHP
jquery 上下滚动广告
2009/06/17 Javascript
Prototype源码浅析 String部分(二)
2012/01/16 Javascript
javascript 另一种图片滚动切换效果思路
2012/04/20 Javascript
JavaScript var声明变量背后的原理示例解析
2013/10/12 Javascript
判断某个字符在一个字符串中是否存在的js代码
2014/02/28 Javascript
javascript教程:关于if简写语句优化的方法
2014/05/17 Javascript
详解iframe与frame的区别
2016/01/13 Javascript
JS读写CSS样式的方法汇总
2016/08/16 Javascript
javascript之IE版本检测超简单方法
2016/08/20 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
2016/10/24 Javascript
在node.js中怎么屏蔽掉favicon.ico的请求
2017/03/01 Javascript
VUE使用vuex解决模块间传值问题的方法
2017/06/01 Javascript
JS动态添加的div点击跳转到另一页面实现代码
2017/09/30 Javascript
[14:51]DOTA2 HEROS教学视频教你分分钟做大人-卓尔游侠
2014/06/13 DOTA
python采用requests库模拟登录和抓取数据的简单示例
2014/07/05 Python
使用XML库的方式,实现RPC通信的方法(推荐)
2017/06/14 Python
老生常谈Python序列化和反序列化
2017/06/28 Python
利用TensorFlow训练简单的二分类神经网络模型的方法
2018/03/05 Python
如何优雅地改进Django中的模板碎片缓存详解
2018/07/04 Python
Python代理IP爬虫的新手使用教程
2019/09/05 Python
Pandas实现DataFrame按行求百分数(比例数)
2019/12/27 Python
如何将json数据转换为python数据
2020/09/04 Python
HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
2013/01/31 HTML / CSS
英国骑行、跑步、游泳、铁人三项运动装备专卖店:Wiggle
2016/08/23 全球购物
受希腊女神灵感的晚礼服、鸡尾酒礼服和婚纱:THEIA
2018/04/15 全球购物
英语自我介绍演讲稿
2014/09/01 职场文书
个人作风建设自查报告
2014/10/22 职场文书
小学教师个人总结
2015/02/05 职场文书
如何使用Maxwell实时同步mysql数据
2021/04/08 MySQL
Win10鼠标轨迹怎么开 Win10显示鼠标轨迹方法
2022/04/06 数码科技
element tree树形组件回显数据问题解决
2022/08/14 Javascript