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

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)多次。尽管从 DOM 元素转换this为 jQuery 对象很简单，但这仍然是不必要的开销。

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

当然，另一种选择就是改变现状this。这是 javascript 之后的内容：

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

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