$（this）和event.target之间的区别？ [英] Difference between $(this) and event.target?
问题描述
我是jQuery的新手，正在制作选项卡式面板，按照 JavaScript和jQuery：The Missing Manual 中的教程，当作者这样做时，第一行就是：
I'm new to jQuery, and was making tabbed panels, following the tutorial in JavaScript and jQuery : The Missing Manual, there's that first line when the author does this :
var target = $(this);
但我试图这样做
var target = evt.target;
我收到了这个错误：
Uncaught TypeError: Object http://localhost/tabbedPanels/#panel1 has no method 'attr'
当我将 evt.target 更改回 $（this）时，它有效喜欢魅力。
And when i changed evt.target back to $(this), it worked like a charm.
我想知道 $（this）和
这是我需要的代码：
index.html：
<!DOCTYPE html>
<html>
<head>
<title>Tabbed Panel</title>
<style>
body {
width : 100%;
height: 100%;
}
#wrapper {
margin : auto;
width : 800px;
}
#tabsContainer {
overflow: hidden;
}
#tabs {
padding:0;
margin:0;
}
#tabs li {
float : left;
list-style:none;
}
#tabs a {
text-decoration:none;
padding : 3px 5px;
display : block;
}
#tabs a.active {
background-color : grey;
}
#panelsContainer {
clear: left;
}
#panel1 {
color : blue;
}
#panel2 {
color : yellow;
}
#panel3 {
color: green;
}
#panel4 {
color : black;
}
</style>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="wrapper">
<div id="tabsContainer">
<ul id="tabs">
<li><a href="#panel1">Panel1</a></li>
<li><a href="#panel2">Panel2</a></li>
<li><a href="#panel3">Panel3</a></li>
<li><a href="#panel4">Panel4</a></li>
</ul>
</div>
<div id="panelsContainer">
<div id="panel1" class="panel">
this is panel1
</div>
<div id="panel2" class="panel">
this is panel2
</div>
<div id="panel3" class="panel">
this is panel3
</div>
<div id="panel4" class="panel">
this is panel4
</div>
</div>
</div>
</body>
</html>
script.js：
$(function(){
$("#tabs a").click(function(evt){
var target = evt.target,
targetPanel = target.attr("href");
$(".panel").hide();
$("#tabs a.active").removeClass("active");
target.addClass("active").blur();
$(targetPanel).fadeIn(300);
evt.preventDefault();
});
$("#tabs a:first").click();
})
推荐答案
是 $（this）之间的区别 event.target ，非常重要。虽然这个（或 event.currentTarget ，见下文）总是引用侦听器附加到的DOM元素， event.target 是被点击的实际DOM元素。请记住，由于事件冒泡，如果您有
There is a difference between $(this) and event.target, and quite a significant one. While this (or event.currentTarget, see below) always refers to the DOM element the listener was attached to, event.target is the actual DOM element that was clicked. Remember that due to event bubbling, if you have
<div class="outer">
<div class="inner"></div>
</div>
并将点击监听器附加到外部div
and attach click listener to the outer div
$('.outer').click( handler );
然后当您启用处理程序时将调用在外部div和内部div中单击（除非你有其他代码处理内部div上的事件并停止传播）。
then the handler will be invoked when you click inside the outer div as well as the inner one (unless you have other code that handles the event on the inner div and stops propagation).
在这个例子中，当你点击内部div，然后在处理程序：
In this example, when you click inside the inner div, then in the handler:
-
这个指的是.outerDOM元素（因为这是处理程序附加到的对象） -
event.currentTarget也指.outer元素（因为那是当前目标处理事件的元素） -
event.target指的是.inner元素（这给你发起事件的元素）
thisrefers to the.outerDOM element (because that's the object to which the handler was attached)event.currentTargetalso refers to the.outerelement (because that's the current target element handling the event)event.targetrefers to the.innerelement (this gives you the element where the event originated)
jQuery包装器 $（这个）只将DOM元素包装在jQuery对象中，因此您可以在其上调用jQuery函数。您可以使用 $（event.target）执行相同操作。
The jQuery wrapper $(this) only wraps the DOM element in a jQuery object so you can call jQuery functions on it. You can do the same with $(event.target).
另请注意，如果重新绑定上下文此（例如，如果您使用Backbone，它会自动完成），它将指向其他内容。您始终可以从 event.currentTarget 获取实际的DOM元素。
Also note that if you rebind the context of this (e.g. if you use Backbone it's done automatically), it will point to something else. You can always get the actual DOM element from event.currentTarget.
这篇关于$（this）和event.target之间的区别？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
