Raf*_*del 142 jquery this javascript-events
我是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();
})
Pet*_*ela 274
有是之间的差异$(this),并event.target和相当显著之一.虽然this(或者event.currentTarget,见下文)总是引用侦听器附加到event.target的DOM元素,但是被点击的实际DOM元素.请记住,由于事件冒泡,如果你有
<div class="outer">
<div class="inner"></div>
</div>
并将click侦听器附加到外部div
$('.outer').click( handler );
然后handler当你在外部div和内部div中单击时将调用它(除非你有其他代码处理内部div上的事件并停止传播).
在此示例中,当您在内部div中单击时,然后在handler:
this引用.outerDOM元素(因为这是处理程序附加到的对象)event.currentTarget也指.outer元素(因为那是处理事件的当前目标元素)event.target是指.inner元素(这为您提供了事件发生的元素)jQuery包装器$(this)只将DOM元素包装在jQuery对象中,因此您可以在其上调用jQuery函数.你也可以这样做$(event.target).
另请注意,如果您重新绑定上下文this(例如,如果您使用Backbone,它会自动完成),它将指向其他内容.您始终可以从中获取实际的DOM元素event.currentTarget.
nbr*_*oks 36
this是正在处理事件的DOM元素的引用(当前目标).event.target是指发起事件的元素.在这种情况下它们是相同的,并且通常可以,但它们并不总是如此.
通过查看jQuery事件文档,您可以很好地理解这一点,但总结如下:
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给你你想要的东西.
小智 8
jQuery如何使用"on"方法处理此变量有很大的不同
$("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"
})
当 jQuery 调用处理程序时，
this关键字是对传递事件的元素的引用；对于直接绑定事件this是附加事件this的元素，对于委托事件是元素匹配选择器。（请注意，如果事件从后代元素冒泡，则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/，它们完全相同
| 归档时间： |
|
| 查看次数： |
105612 次 |
| 最近记录： |