我是 jQuery 新手,并且正在按照 JavaScript 和 jQuery 中的教程制作选项卡式面板:The Missing Manual ,当作者这样做时,第一行是:
var target = $(this);
但我试着那样做
var target = evt.target;
我得到了那个错误:
未捕获的类型错误:对象 http://localhost/tabbedPanels/#panel1 没有方法“attr”
当我改evt.target回 时$(this),它就像一个魅力。
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(); })
和 之间 有区别,而且相当重要。虽然(或,见下文)始终指代侦听器附加到的 DOM 元素,但实际上是被单击的 DOM 元素。请记住,由于事件冒泡,如果您有$(this)``event.target``this``event.currentTarget``event.target
$(this)``event.target``this``event.currentTarget``event.target
<div class="outer"> <div class="inner"></div> </div>
并将点击监听器附加到外部 div
$('.outer').click( handler );
然后handler当您在外部 div 和内部 div 内部单击时将调用 (除非您有其他代码处理内部 div 上的事件并停止传播)。
handler
在此示例中,当您在内部 div 内单击时,然后在handler:
this
.outer
event.currentTarget
event.target
.inner
jQuery 包装器$(this)仅将 DOM 元素包装在 jQuery 对象中,因此您可以在其上调用 jQuery 函数。您可以对$(event.target).
$(event.target)
另请注意,如果您重新绑定上下文this(例如,如果您使用 Backbone,它会自动完成),它将指向其他内容。您总是可以从event.currentTarget.