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)是一个包装DOM节点的jQuery对象，它允许您使用jQuery的魔法来查询操作DOM。

换句话说，你可以这样做：

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

但你不能这样做：

event.tagert.addClass('myClass');

Answer 2

在第一种情况下，本地变量$tgt将保存jQuery元素（包裹在DOM元素中），在第二种情况下，它将保存DOM元素。

您不能直接在DOM元素上使用jQuery操作方法（例如.val()），因此如果您想这样做，首先需要将它转换为jQuery元素。

Answer 3

我建议只使用$(this)来抓取元素。 jQuery在内部执行此操作，因此您不必：

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

要回答您的问题：$(event.target)将使用jQuery进行扩展，而event.target则不会。

jquery美元符号

3 个答案: