Dollar icon in jquery

Question

I have this html:

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

and I have this jquery code:

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

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

My question is what is the difference between

var $tgt = $(event.target);

and

var $tgt = event.target;

Answer 1

event.targetis a reference to the DOM node. $(event.target)is a jQuery object that wraps a DOM node, which allows you to use jQuery magic to request DOM control.

In other words, you can do this:

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

but you cannot do this:

event.tagert.addClass('myClass');

Answer 2

In the first case, the local varialbe $tgtwill contain the jQuery element (wrapped around the DOM element), in the second case it will contain the DOM element.

jQuery (, .val()) DOM, jQuery, .

Answer 3

I would suggest just using it $(this)to capture an element. jQuery does this internally, so you don't need to:

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

To answer your question: It $(event.target)will be expanded using jQuery, but event.targetwill not.