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实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 jQuery
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 jQuery
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
jQuery事件多次绑定与解绑问题实例分析
Feb 19 jQuery
浅谈JS和jQuery的区别
Mar 27 jQuery
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
JS 遍历 json 和 JQuery 遍历json操作完整示例
Nov 11 jQuery
jquery实现简易验证插件封装
Sep 13 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
动漫定律:眯眯眼都是怪物!这些角色狠话不多~
2020/03/03 日漫
COM in PHP (winows only)
2006/10/09 PHP
php下intval()和(int)转换使用与区别
2008/07/18 PHP
PHP中的Trait 特性及作用
2016/04/03 PHP
微信公众号实现扫码获取微信用户信息(网页授权)
2019/04/09 PHP
javascript 继承实现方法
2009/08/26 Javascript
把html页面的部分内容保存成新的html文件的jquery代码
2009/11/12 Javascript
页面中iframe相互传值传参
2009/12/13 Javascript
IE bug table元素的innerHTML
2010/01/11 Javascript
JavaScript中发布/订阅模式的简单实例
2014/11/05 Javascript
jQuery实现的checkbox级联选择下拉菜单效果示例
2016/12/26 Javascript
详解NodeJs支付宝移动支付签名及验签
2017/01/06 NodeJs
canvas实现图像截取功能
2017/02/06 Javascript
Require.JS中的几种define定义方式示例
2017/06/01 Javascript
为什么使用koa2搭建微信第三方公众平台的原因
2018/05/16 Javascript
基于Koa2写个脚手架模拟接口服务的方法
2018/11/27 Javascript
原生javascript自定义input[type=radio]效果示例
2019/08/27 Javascript
微信小程序表单验证WxValidate的使用
2019/11/27 Javascript
python通过邮件服务器端口发送邮件的方法
2015/04/30 Python
在Python中执行系统命令的方法示例详解
2017/09/14 Python
Python实现图片尺寸缩放脚本
2018/03/10 Python
Python要如何实现列表排序的几种方法
2020/02/21 Python
python des,aes,rsa加解密的实现
2021/01/16 Python
详解修改Anaconda中的Jupyter Notebook默认工作路径的三种方式
2021/01/24 Python
成人继续教育实施方案
2014/03/01 职场文书
中介公司区域经理岗位职责范本
2014/03/02 职场文书
行政专员的岗位职责
2014/03/10 职场文书
集中整治工作方案
2014/05/01 职场文书
教师拔河比赛广播稿
2014/10/14 职场文书
办公室主任岗位职责
2015/01/31 职场文书
关于军训的感想
2015/08/07 职场文书
《中国机长》观后感:敬畏生命,敬畏职责
2019/11/12 职场文书
HAM-2000摩机图
2021/04/22 无线电
MySQL into_Mysql中replace与replace into用法案例详解
2021/09/14 MySQL
Python函数中apply、map、applymap的区别
2021/11/27 Python
使用 Docker Compose 构建复杂的多容器App
2022/04/30 Servers