我是jQuery的新手,正在制作选项卡式面板,按照 JavaScript和jQuery:The Missing Manual 中的教程,当作者这样做时,第一行是这样的:
var target = $(this);
但我试着这样做
var target = evt.target;
我得到了那个错误:
Uncaught TypeError: Object http://localhost/tabbedPanels/#panel1 has no method 'attr'
当我将evt.target
更改回$(this)
时,它就像魅力一样。
我想知道$(this)
和evt.target
之间有什么区别?
以下是我需要的代码:
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();
})
答案 0 :(得分:255)
是 $(this)
和event.target
之间的差异,而且非常重要。虽然this
(或event.currentTarget
,见下文)始终引用侦听器附加到的DOM元素,但event.target
是被单击的实际DOM元素。请记住,由于事件冒泡,如果你有
<div class="outer">
<div class="inner"></div>
</div>
并将click侦听器附加到外部div
$('.outer').click( handler );
然后当您在外部div和内部div中单击时将调用handler
(除非您有其他代码处理内部div上的事件并停止传播)。
在此示例中,当您在内部div中单击时,然后在handler
:
this
引用.outer
DOM元素(因为这是附加处理程序的对象)event.currentTarget
也指.outer
元素(因为这是处理事件的当前目标元素)event.target
引用.inner
元素(这为您提供了事件源自的元素) jQuery包装器$(this)
仅将DOM元素包装在jQuery对象中,因此您可以在其上调用jQuery函数。您可以使用$(event.target)
执行相同操作。
另请注意,如果您重新绑定this
的上下文(例如,如果您使用Backbone,它会自动完成),它将指向其他内容。您始终可以从event.currentTarget
获取实际的DOM元素。
答案 1 :(得分:36)
this
是正在处理事件的DOM元素的引用(当前目标)。 event.target
指的是发起事件的元素。在这种情况下它们是相同的,并且通常可以,但它们并不总是如此。
通过查看jQuery event docs,您可以很好地理解这一点,但总结如下:
<强> event.currentTarget 强>
事件冒泡中的当前DOM元素 相。
<强> event.delegateTarget 强>
当前调用的jQuery的元素 事件处理程序已附加。
<强> event.relatedTarget 强>
事件中涉及的其他DOM元素(如果有)。
<强> event.target 强>
发起事件的DOM元素。
要使用jQuery获取所需的功能,必须使用以下任一项将其包装在jQuery对象中:$(this)
或$(evt.target)
。
.attr()
方法仅适用于jQuery对象,而不适用于DOM元素。 $(evt.target).attr('href')
或简称evt.target.href
会为您提供所需内容。
答案 2 :(得分:7)
jQuery如何使用&#34; on&#34;处理这个变量有很大的不同。方法
$("outer DOM element").on('click',"inner DOM element",function(){
$(this) // refers to the "inner DOM element"
})
如果将其与: -
进行比较$("outer DOM element").click(function(){
$(this) // refers to the "outer DOM element"
})
答案 3 :(得分:3)
此处存在跨浏览器问题。
典型的非jQuery事件处理程序将是这样的:
function doSomething(evt) {
evt = evt || window.event;
var target = evt.target || evt.srcElement;
if (target.nodeType == 3) // defeat Safari bug
target = target.parentNode;
//do stuff here
}
jQuery规范化evt
并使目标在事件处理程序中可用为this
,因此典型的jQuery事件处理程序将是这样的:
function doSomething(evt) {
var $target = $(this);
//do stuff here
}
使用jQuery的规范化evt
和POJS目标的混合事件处理程序将是这样的:
function doSomething(evt) {
var target = evt.target || evt.srcElement;
if (target.nodeType == 3) // defeat Safari bug
target = target.parentNode;
//do stuff here
}
答案 4 :(得分:3)
当jQuery调用处理程序时,
this
关键字是对该处理程序的引用 元素传递事件的位置;对于直接绑定的事件this
是附加事件和委派事件的元素 eventsthis
是一个元素匹配选择器。 (请注意,this
可能不会 如果事件来自后代,则等于event.target
元素。)从元素创建一个jQuery对象,以便它可以 与jQuery方法一起使用,使用$(this)。
如果我们有
<input type="button" class="btn" value ="btn1">
<input type="button" class="btn" value ="btn2">
<input type="button" class="btn" value ="btn3">
<div id="outer">
<input type="button" value ="OuterB" id ="OuterB">
<div id="inner">
<input type="button" class="btn" value ="InnerB" id ="InnerB">
</div>
</div>
检查以下输出:
<script>
$(function(){
$(".btn").on("click",function(event){
console.log($(this));
console.log($(event.currentTarget));
console.log($(event.target));
});
$("#outer").on("click",function(event){
console.log($(this));
console.log($(event.currentTarget));
console.log($(event.target));
})
})
</script>
请注意,我使用$
来包装dom元素以创建jQuery对象,这就是我们一直以来的做法。
您会发现,对于第一种情况,this
,event.currentTarget
,event.target
都引用了相同的元素。
在第二种情况下,当触发某个包装元素的事件委托时,event.target
将被引用到触发元素,而this
和event.currentTarget
被引用到活动已经交付。
对于this
和event.currentTarget
,根据http://api.jquery.com/event.currenttarget/
答案 5 :(得分:1)
'this' 指的是事件侦听器已附加到的 DOM 对象。 'event.target' 指的是触发事件侦听器的 DOM 对象。 一个自然的问题是,为什么事件侦听器会为其他 DOM 对象触发。 这是因为事件侦听器也为子对象附加了父触发器。
答案 6 :(得分:0)
在事件处理函数或对象方法中,一种访问&#34;包含元素&#34;的属性的方法。是使用特殊的this关键字。 this关键字表示当前正在处理的函数或方法的所有者。所以:
对于全局函数,它代表窗口。
对于对象方法,它表示对象实例。
在事件处理程序中,这表示接收事件的元素。
例如:
<!DOCTYPE html>
<html>
<head>
<script>
function mouseDown() {
alert(this);
}
</script>
</head>
<body>
<p onmouseup="mouseDown();alert(this);">Hi</p>
</body>
</html>
分别渲染此html后警报窗口的内容为:
object Window
object HTMLParagraphElement
Event对象与所有事件相关联。它具有提供有关事件&#34;的信息的属性,例如网页中鼠标点击的位置。
例如:
<!DOCTYPE html>
<html>
<head>
<script>
function mouseDown(event) {
var theEvent = event ? event : window.event;
var locString = "X = " + theEvent.screenX + " Y = " + theEvent.screenY;
alert(event);
alert(locString);
}
</script>
</head>
<body>
<p onmouseup="mouseDown(event);">Hi</p>
</body>
</html>
分别渲染此html后警报窗口的内容为:
object MouseEvent
X = 982 Y = 329