Я новичок в 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();
})
javascript-events
this
jquery
Рафаэль Адель
источник
источник
this
является ссылкой на элемент DOM JavaScript.$()
это формат, предоставляемый jQuery для превращения элемента DOM в объект jQuery. используяevt.target
вы ссылаетесь на элемент, тогда как$(this)
вы ссылаетесь на объект с параметрами, к которым у нас есть доступ.$(evt.target)
и (в этом случае) в конечном итоге с теми же результатами..attr()
Обеспечивается способ, с помощью JQuery объекта, а не сам элементОтветы:
Там является разница между
$(this)
иevent.target
, и довольно значительным. Хотяthis
(илиevent.currentTarget
, см. Ниже) всегда относится к элементуevent.target
DOM, к которому был присоединен слушатель, это фактический элемент DOM, по которому был выполнен щелчок. Помните, что из-за пузыря события, если у вас естьи прикрепить прослушиватель кликов к внешнему div
тогда
handler
будет вызвано, когда вы щелкнете как по внешнему div, так и по внутреннему (если у вас нет другого кода, который обрабатывает событие на внутреннем div и останавливает распространение).В этом примере, когда вы нажимаете внутри внутреннего div, то в
handler
:this
ссылается на.outer
элемент DOM (потому что это объект, к которому был прикреплен обработчик)event.currentTarget
также относится к.outer
элементу (потому что это текущий целевой элемент, обрабатывающий событие)event.target
ссылается на.inner
элемент (это дает вам элемент, где произошло событие)Оболочка jQuery
$(this)
только оборачивает элемент DOM в объект jQuery, поэтому вы можете вызывать на нем функции jQuery. Вы можете сделать то же самое с$(event.target)
.Также обратите внимание, что если вы перепривязываете контекст
this
(например, если вы используете Backbone, это делается автоматически), это будет указывать на что-то еще. Вы всегда можете получить фактический элемент DOM отevent.currentTarget
.источник
currentTarget
всегда тот, с обработчиком, т.е. внешнийthis
является ссылкой на элемент DOM, для которого обрабатывается событие (текущая цель).event.target
относится к элементу, который инициировал событие. Они были одинаковыми в этом случае, и часто могут быть, но это не всегда так.Вы можете получить представление об этом, просмотрев документацию по событиям jQuery , но вкратце:
Чтобы получить желаемую функциональность с помощью jQuery, вы должны обернуть его в объект jQuery, используя:
$(this)
или$(evt.target)
..attr()
Метод работает только на объект JQuery, а не на DOM элемента.$(evt.target).attr('href')
или простоevt.target.href
даст вам то, что вы хотите.источник
Существует значительное различие в том, как jQuery обрабатывает переменную this методом on.
Если вы сравните это с: -
источник
http://api.jquery.com/on/ заявляет:
Если у нас есть
Проверьте вывод ниже:
Обратите внимание, что я использую,
$
чтобы обернуть элемент dom, чтобы создать объект jQuery, как мы всегда делаем.Вы обнаружите , что в первом случае
this
,event.currentTarget
,event.target
все привязаны к одному элементу.В то время как во втором случае, когда делегат события для какого-либо обернутого элемента сработал,
event.target
будет указана ссылка на сработавший элемент, а наthis
иevent.currentTarget
будет указано, куда доставлено событие.Для
this
иevent.currentTarget
они абсолютно одинаковы, согласно http://api.jquery.com/event.currenttarget/источник
Здесь есть кросс-браузерные проблемы.
Типичный обработчик событий не-jQuery будет выглядеть примерно так:
jQuery нормализует
evt
и делает цель доступной, какthis
в обработчиках событий, поэтому типичный обработчик событий jQuery будет выглядеть примерно так:Гибридный обработчик событий, который использует нормализованный jQuery
evt
и цель POJS, будет выглядеть примерно так:источник
В функции-обработчике события или методе объекта одним из способов доступа к свойствам «содержащего элемента» является использование специального ключевого слова this. Ключевое слово this представляет владельца функции или метода, обрабатываемого в данный момент. Так:
Для глобальной функции это представляет окно.
Для метода объекта это представляет экземпляр объекта.
И в обработчике событий это представляет элемент, который получил событие.
Например:
Содержимое окон оповещения после рендеринга этого HTML соответственно:
Объект Event связан со всеми событиями. У него есть свойства, предоставляющие информацию «о событии», например, местоположение щелчка мыши на веб-странице.
Например:
Содержимое окон оповещения после рендеринга этого HTML соответственно:
источник