$（this）OR event.target或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'); 
}); 

我理解的东西传递给变量的性能效率，但不论是否在这些情况下使用$（本）或$（event.target）为我提供了已经等在同一效率我不确定设置一个新的变量我实际上正在做更多的工作，我需要。

谢谢。

Answer 1

我可能是错的，但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 2

在我的经验，我会去的以下内容：

$('#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的类执行更好。

Answer 3

this和event.target并不总是相同的。 this引用您指定侦听器的元素（在本例中为'#a_button'）。 event.target然而，actualy触发事件的元素可能是#a_button的子节点。

所以$(this)是你正在寻找的东西。

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

Answer 4

我建了一个小例子来说明如何this和e.target实际工作：http://jsfiddle.net/xZAVa/