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版本 1.x? 2.x? 3.x?
Apr 01 jQuery
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
jquery实现企业定位式导航效果
Jan 01 jQuery
jQuery实现的简单获取索引功能示例
Jun 04 jQuery
jQuery实现的简单对话框拖动功能示例
Jun 05 jQuery
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
jQuery实现的五星点评功能【案例】
Feb 18 jQuery
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 jQuery
jQuery控制input只能输入数字和两位小数的方法
May 16 jQuery
jQuery属性选择器用法实例分析
Jun 28 jQuery
jQuery操作事件完整实例分析
Jan 10 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
set_exception_handler函数在ThinkPHP中的用法
2014/10/31 PHP
Javascript &amp; DHTML 实例编程(教程)基础知识
2007/06/02 Javascript
JavaScript 核心参考教程 内置对象
2009/10/13 Javascript
解决表单中第一个非隐藏的元素获得焦点的一个方案
2009/10/26 Javascript
JavaScript replace(rgExp,fn)正则替换的用法
2010/03/04 Javascript
asp.net+jquery滚动滚动条加载数据的下拉控件
2010/06/25 Javascript
Js 去掉字符串中的空格(实现代码)
2013/11/19 Javascript
jQuery中:first-child选择器用法实例
2014/12/31 Javascript
jquery获取checkbox的值并post提交
2015/01/14 Javascript
jQuery动态效果显示人物结构关系图的方法
2015/05/07 Javascript
jQuery中选择器的基础使用教程
2016/05/23 Javascript
NodeJS简单实现WebSocket功能示例
2018/02/10 NodeJs
jQuery实现的点击图片居中放大缩小功能示例
2019/01/16 jQuery
Vue 之孙组件向爷组件通信的实现
2019/04/23 Javascript
bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法
2019/07/09 Javascript
微信小程序左右滚动公告栏效果代码实例
2019/09/16 Javascript
Centos7 安装Node.js10以上版本的方法步骤
2019/10/15 Javascript
详解React 条件渲染
2020/07/08 Javascript
pygame学习笔记(2):画点的三种方法和动画实例
2015/04/15 Python
基于python时间处理方法(详解)
2017/08/14 Python
Python安装Numpy和matplotlib的方法(推荐)
2017/11/02 Python
使用python中的in ,not in来检查元素是不是在列表中的方法
2018/07/06 Python
python实现图像检索的三种(直方图/OpenCV/哈希法)
2019/08/08 Python
世界顶级足球门票网站:Live Football Tickets
2017/10/14 全球购物
可以使用抽象函数重写基类中的虚函数吗
2013/06/02 面试题
小学班主任培训方案
2014/06/04 职场文书
2014年维修电工工作总结
2014/11/20 职场文书
2014年保卫科工作总结
2014/12/05 职场文书
2016年植树节红领巾广播稿
2015/12/17 职场文书
2016年庆祝六一儿童节活动总结
2016/04/06 职场文书
Ajax请求超时与网络异常处理图文详解
2021/05/23 Javascript
html5 录制mp3音频支持采样率和比特率设置
2021/07/15 Javascript
Python游戏开发实例之graphics实现AI五子棋
2021/11/01 Python
使用javascript解析二维码的三种方式
2021/11/11 Javascript
Python测试框架pytest高阶用法全面详解
2022/06/01 Python
TS 类型收窄教程示例详解
2022/09/23 Javascript