$(this) OR event.target OR var input = $(this)

Question

在我快乐地生活了 12 年后，jQuery 目前正在为我提供一个有趣的 Javascript 介绍。我正处于尝试尽可能多地学习优化我编写的代码的阶段，虽然我找到了很多很好的参考资料，但有一些非常基本的东西让我感到困惑，我一直无法在任何地方都可以找到有关它的任何信息。

当我将某些东西附加到一个元素时，我应该如何在函数中引用该元素。例如，将函数附加到元素的点击事件时：

$('#a_button',$('#a_list_of_buttons')).click(function() {
    // NOW WHAT'S THE BEST WAY TO REFER TO '#a_button' ?
});

我知道不要像这样一直重新选择它，因为浏览器必须从头开始重新搜索整个 DOM 才能找到它已经找到的内容：

$('#a_button').click(function() {
    // I KNOW THAT THIS IS NAUGHTY
    var buttonValue = $('#a_button').val();
    $('#a_button').addClass('button_has_been_clicked');

});

目前我正在使用以下任何一种，但不完全确定每个人实际上在做什么：

$('#a_button').click(function() {
    // USING this
    var buttonValue = $(this).val();
    $(this).addClass('button_has_been_clicked');
});

但这只是像第一个“顽皮”示例中那样重新选择吗？

$('#a_button').click(function(event) {
    // USING event.target
    var buttonValue = $(event.target).val();
    $(event.target).addClass('button_has_been_clicked');
});

这看起来可能更好，但多次引用“event.target”是否有效？

$('#a_button').click(function(event) {
    // USING A LOCAL VARIABLE
    var thisButton = $(this);

    // OR SHOULD THAT BE
    var thisButton = $(event.target);

    var buttonValue = thisButton.val();
    thisButton.addClass('button_has_been_clicked');
});

我了解将事物传递给变量的性能效率，但我不确定在这些情况下使用 $(this) 或 $(event.target) 是否已经为我提供了相同的效率，因此通过设置一个新变量我实际上正在做更多我需要做的工作。

谢谢。

Answer 1

我构建了一个小示例来演示 this 和 e.target 的实际工作原理：http://jsfiddle.net/xZAVa/

Answer 2

我可能错了，但this 和event.target 只是对同一元素的不同引用。

this 和event.target 不是总是 对同一元素的引用。但在回答您的问题时，var thisButton = $(this); 绝对是赢家。如果您正在编写 C# 代码，则永远不会执行以下操作：

this.Controls[0].Controls[0].Text = "Foo";
this.Controls[0].Controls[0].Controls.Clear();

你会这样做：

var control = this.Controls[0].Controls[0];

因此，您可能也不应该多次重复使用$(this)。尽管将 this 从 DOM 元素转换为 jQuery 对象很简单，但仍然是不必要的开销。

但是，有时您需要从优化中恢复，以确保您的代码保持其可读性。

当然，另一种选择就是更改 this 是什么。这是javascript之后的：

this = $(this); // Now `this` is your jQuery object

免责声明：我只是尝试了上述方法，它似乎有效。不过可能有一些问题。

Answer 3

this 和 event.target 并不总是相同的。 this 指的是您将侦听器分配给的元素（在本例中为 '#a_button' ）。但event.target 是实际触发事件的元素，它可以是#a_button 的子节点。

所以$(this) 就是你要找的东西。

见参考：http://api.jquery.com/event.target/

Answer 4

根据我的经验，我会选择以下方法：

$('#a_button').click(function() {
    // USING this
    var buttonValue = $(this).val();
    $(this).addClass('button_has_been_clicked');
});

点击回调方法上下文中的this 是对DOM 事件的引用。由于您已经拥有对 DOM 对象的引用，因此将其转换为 jQuery 对象很简单，因为不需要查找。

但附带说明一下，如果您不需要在回调中使用 jQuery，那就不要。您可以使用标准 JS this.currentTarget.value 简单地获取按钮的值。

您提到的其他示例需要 DOM 查找，并且根据选择器的复杂性可能需要更长的时间。使用像 '#a_button' 这样的基于 id 的查找将比像 .myClass 这样的基于类的查找性能更好。