Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

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' ?
});

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');
});

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');
});

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.

Thank you.

like image 354
Chris Stevenson Avatar asked Aug 02 '10 13:08

Chris Stevenson


People also ask

Why is currentTarget null?

currentTarget is only available while the event is being handled. If you console. log() the event object, storing it in a variable, and then look for the currentTarget key in the console, its value will be null . Save this answer.

What is this in jQuery?

$(this): It also refers to the object it belongs to. Basically, both are the same. But when this keyword is used inside $(), then it becomes a jQuery object, and now we can use all properties of jQuery on this method. Example: HTML.

What is the difference between target and currentTarget?

currentTarget is the element. target is the element user clicked on, in the case of click event. It can be the original element or any of its children depending on where user clicks on exactly.


2 Answers

this and event.target are not always the same. this refers to the element you assigned the listener to ( in this case the '#a_button' ). event.target however is the element that actualy triggered the event, which can be a childnode of #a_button.

So $(this) is the thing you are looking for.

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

like image 98
Baju Avatar answered Sep 23 '22 15:09

Baju


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

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();

You would do this:

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

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.

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.

like image 40
djdd87 Avatar answered Sep 21 '22 15:09

djdd87