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

Question

jQuery zapewnia mi teraz zabawne wprowadzenie do Javascript po 12 latach bezowocnego życia. Jestem na etapie, na którym staram się nauczyć jak najwięcej o optymalizacji kodu, który piszę i chociaż znalazłem dużo dobrego materiału referencyjnego, jest coś podstawowego, co mnie zastanawia i nie byłem w stanie aby znaleźć cokolwiek na ten temat w dowolnym miejscu.

Kiedy przywiązuję coś do elementu, jak powinienem odnosić się do tego elementu w funkcji. Na przykład, gdy dołączasz funkcję do elementu za kliknięcie imprezy:

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

nie wiem zachować re-wybierając go jak tak przeglądarka musi przeszukać cały DOM ponownie od zera, aby znaleźć to, co już stwierdzono raz :

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

}); 

Obecnie używam jednego z następujących ale nie jestem do końca pewien, co każdy z nich jest rzeczywiście robi:

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

ale jest to po prostu ponownie wybierając jak w jodeł t "niegrzeczny" przykład?

Wygląda na to, że może być lepiej, ale czy można wielokrotnie odwoływać się do "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'); 
}); 

Rozumiem wydajności wydajności przechodząc do rzeczy zmiennych, ale jestem pewien, czy w takich sytuacjach za pomocą $ (this) lub $ (event.target) dostarcza mi już i tak przez te same wydajności ustawianie nowej zmiennej Robię więcej pracy, której potrzebuję.

Dziękuję.

Answer 1

Mogę się mylić, ale this i event.target są po prostu różnymi odniesieniami do tego samego elementu.

this i event.target nie są zawsze odniesienia do tego samego elementu. Ale w odpowiedzi na twoje pytanie, zdecydowanie wygrywa var thisButton = $(this);. Jeśli zostały pisanie kodu C#, nigdy nie należy wykonać następujące czynności:

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

Można by to zrobić:

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

Więc prawdopodobnie nigdy nie powinny ponownego wykorzystania $(this) więcej niż raz albo. Mimo, że konwersja this z elementu DOM na obiekt jQuery jest banalnie trywialna, nadal jest niepotrzebnym narzutem.

Czasami trzeba jednak cofnąć się od optymalizacji, aby upewnić się, że kod zachowuje czytelność.

Inną opcją jest oczywiście zmiana tego, co jest this. To javascript afteral:

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

Zastrzeżone: ja dopiero próbowałem powyżej i wydawało się do pracy. Może jednak mieć pewne problemy.

Answer 2

Z mojego doświadczenia wynika, że ​​idę z następujących czynności:

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

this w kontekście metodę click zwrotnego jest odniesienie do zdarzenia DOM. Ponieważ masz już odniesienie do obiektu DOM, to jest trival, aby przekonwertować go do obiektu jQuery, ponieważ wyszukiwanie nie jest wymagane.

Ale na marginesie, jeśli nie potrzebujesz używać jQuery w swoim oddzwonieniu, to nie rób tego. Możesz po prostu uzyskać wartość przycisku za pomocą standardowego JS this.currentTarget.value.

Inne wymienione przykłady wymagają wyszukiwania DOM, a w zależności od złożoności selektora może to potrwać dłużej. Używanie wyszukiwania opartego na identyfikatorze, takiego jak '#a_button', będzie działać lepiej niż klasa oparta na klasie wyglądającej na .myClass.

Answer 3

i event.target nie zawsze są takie same. this odnosi się do elementu, któremu przypisano słuchacza (w tym przypadku "#a_ przycisk"). event.target jest jednak elementem, który faktycznie wywołał zdarzenie, które może być węzłem podrzędnym z #a_button.

Tak więc $(this) jest tym, czego szukasz.

See referencyjny: http://api.jquery.com/event.target/

Answer 4

Zbudowałem mały przykład, aby wykazać jak this i e.target rzeczywiście działa: http://jsfiddle.net/xZAVa/