$（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/