$（this）OR event.target OR var input = $（this） [英] $(this) OR event.target OR var input = $(this)

问题描述

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

jQuery is currently providing me with a fun introduction to Javascript after 12 years of surviving happily without. I'm at the stage where I'm trying to learn as much as I can about optimising the code I write and, whilst I have found plenty of good reference material, there is something quite basic which is puzzling me and I have been unable to find anything about it anywhere.

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

When I'm attaching something to an element how should I be referring to that element within the function. For example, when attaching a function to an element's click event :

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

我知道不要继续重新选择它，因为浏览器必须再次搜索整个DOM从头开始查找已经找到的内容：

I know not to keep re-selecting it like so as the browser has to search the whole DOM again from scratch to find what it's already found once :

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

});

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

Currently I'm using either of the following but am not entirely sure what each is actually doing :

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

但这只是在第一个顽皮的例子中重新选择？

But is this just re-selecting like in the first "naughty" example?

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

这似乎可能更好但多次引用'event.target'是有效的？

This seems like it might be better but is it efficient to refer to 'event.target' multiple times?

$('#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）已经为我提供了相同的效率，因此通过设置一个新的变量，我实际上正在做更多我需要的工作。

I understand the performance efficiencies of passing things to variables but I'm unsure whether or not in these situations using $(this) or $(event.target) provides me with the same efficiencies already and so by setting a new variable I'm actually doing more work that I need to.

谢谢。

推荐答案

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

I may be wrong, but this and event.target are both just different references to the same element.

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

this and event.target are not always references to the same element. But in answer to your question, var thisButton = $(this); is definitely the winner. If you were writing C# code, you would never do the following:

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

你会这样做：

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

所以你可能永远不应该重复使用 $（this）不止一次。虽然将这个从DOM元素转换为jQuery对象是微不足道的，但它仍然是一个不必要的开销。

So you probably should never re-use $(this) more than once either. Althought it's trivial to convert this from a DOM element to a jQuery object, it's still an unnecessary overhead.

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

However, sometimes you need to gear back from optimisation to make sure your code maintains it's readability.

另一种选择当然只是改变这个是。这是javascript afteral：

Another option of course is just to change what this is. This is javascript afteral:

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

免责声明：我只有刚试过上面的内容似乎很有效。可能会有一些问题。

Disclaimer: I only just tried the above and it seemed to work. Might have some issues though.

这篇关于$（this）OR event.target OR var input = $（this）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！