jQuery中event.target和this的区别详解
this和event.target的区别：
1.js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远指向触发事件的DOM元素本身；
2.this和event.target都是dom对象，使用jQuey中的方法可以将他们转换为jquery对象：$(this)和$(event.target).
比如,一个很简单的例子.
$(event.target)指向触发事件的元素. 当点击蓝色小方框时, 蓝色小方框会变成橙色, 但其外围的大方框不会变色, 即没有触发事件的冒泡行为.
点击前: 
点击后: 
<!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获取触发事件的元素会引起事件的冒泡.
点击前: 
点击后: 
<!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返回定位插件的相关知识，具有很好的参考价值。下面跟着小编一起来看下吧2017-05-05
jquery是一种广泛使用的javascript库,获取a标签上的href值是一个常见的需求,要获取a标签上的href值,只需使用选择器选择a元素,并使用attr()方法来获取href属性值,以下是一些使用jQuery获取a标签上的href值的示例代码,需要的朋友可以参考下2024-05-05
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
这篇文章主要介绍了jQuery.extend 与 jQuery.fn.extend的用法及区别,结合实例形式分析了jQuery.extend与jQuery.fn.extend的功能、使用方法及区别,需要的朋友可以参考下2018-07-07
这篇文章主要介绍了jQuery获取页面元素绝对与相对位置的方法,涉及jQuery中offset、position等方法的使用技巧,需要的朋友可以参考下2015-06-06
在jQuery中最快的选择器是ID选择器，因为它直接来自于JavaScript的getElementById()方法2009-05-05
这篇文章主要介绍了jQuery中的pushStack实现原理和应用实例,pushStack是jQuery内核中一个非常重要的函数,许多jQuery内部函数中都频繁用到它,掌握这个函数,有利于理解jQuery的运行原理,需要的朋友可以参考下2015-02-02
这篇文章主要介绍了jQuery UI Grid 模态框中的表格实例代码讲解，非常不错，具有参考借鉴价值,需要的朋友可以参考下2017-04-04
jQuery实现获取form表单内容及绑定数据到form表单操作分析
这篇文章主要介绍了jQuery实现获取form表单内容及绑定数据到form表单操作,结合jQuery封装插件操作分析了jQuery针对form表单的serializeJson数据获取及setForm数据绑定相关操作技巧,需要的朋友可以参考下2018-07-07
这篇文章主要介绍了jquery实现模拟百分比进度条渐变效果代码,涉及jQuery基于时间函数操作页面元素样式变换的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-10-10
这篇文章主要介绍了jquery实现将获取的颜色值转换为十六进制形式的方法,包含了完整的实例与关键代码的注释说明,并附带了所需知识点的参考文章地址,具有一定的参考借鉴价值,需要的朋友可以参考下2014-12-12
最新评论