Question

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

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

$('#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和event.target并不总是一样的。 this指的是您为侦听器指定的元素（在本例中为“#a_button”）。 event.target是实际触发事件的元素，可以是#a_button的子节点。

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

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

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 afteral：

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

免责声明：我只是尝试了上述内容，似乎有效。可能会有一些问题。

Answer 3

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

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查找，并且根据选择器的复杂程度可能需要更长时间。使用基于ID的查找（例如'#a_button'）将比基于类的.myClass更好。

$（this）OR event.target OR var input = $（this）

4 个答案: