Знак доллара

Question

У меня есть этот HTML:

<ul id="list1" class="eventlist">
  <li>plain</li>
  <li class="special">special <button>I am special</button></li>
  <li>plain</li>
</ul>

и у меня есть этот код jquery:

$('#list1 li.special button').click(function(event) {

  var $newLi = $('<li class="special"><button>I am new</button></li>');
  var $tgt = $(event.target);
});

Мой вопрос, в чем разница между

var $tgt = $(event.target);

и

var $tgt = event.target;

Answer 1

event.target является ссылкой на узел DOM. $(event.target) - это объект jQuery, который оборачивает узел DOM, что позволяет вам использовать магию jQuery для запросов манипулирования DOM.

Другими словами, вы можете сделать это:

$(event.target).addClass('myClass');

но вы не можете сделать это:

event.tagert.addClass('myClass');

Answer 2

В первом случае локальная переменная $tgt будет содержать элемент jQuery (обернутый вокруг элемента DOM), во втором случае он будет содержать элемент DOM.

Вы не можете использовать методы манипуляции jQuery (например, .val()) непосредственно для элементов DOM, поэтому вам нужно сначала преобразовать его в элемент jQuery, если вы хотите это сделать.

Answer 3

Я бы посоветовал просто использовать $(this) для захвата элемента. JQuery делает это внутренне, поэтому вам не нужно:

$('#list1 li.special button').click(function() {
    var $tgt = $(this);
});

Чтобы ответить на ваш вопрос: $(event.target) будет расширен с помощью jQuery, а event.target - нет.