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

Question

jQuery currently provides me with an interesting introduction to Javascript after 12 years of survival happily without. I am at the stage where I try to learn as much as possible about how to optimize the code that I write, and although I found a lot of good reference material, there is something pretty basic that puzzles me, and I could not find what - Anything about it anywhere.

When I attach something to an element, how should I refer to this element inside the function. For example, when attaching a function to the click event of an element:

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

I know that you should not re-select it so that the browser again searches the entire DOM from scratch to find what it 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'); }); 

I am currently using one of the following, but I'm not quite sure what they are actually doing:

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

But is it just a second choice, as 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'); }); 

It seems like it could be better, but is it possible to reference event.target several 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 efficiency of data transfer performance in variables, but I'm not sure whether or not in these situations using $ (this) or $ (event.target) gives me the same efficiency already by setting a new variable. I actually I’m doing more work that I need.

Thanks.

Answer 1

I could be wrong, but this and event.target are just different references to the same element. C>

this and event.target are not always references to the same element. But in response to your question var thisButton = $(this); definitely a winner. If you write C # code, you will 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]; 

That way, you probably should never reuse $(this) more than once. Although it is trivial to convert this from a DOM element to a jQuery object, this is still unnecessary overhead.

However, sometimes you need to switch from optimization to make sure your code supports its readability.

Another option is to simply change what this . This is javascript afteral:

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

Disclaimer: I just tried the above and it seemed to work. There may be some problems.

Answer 2

this and event.target not always the same. this refers to the element to which you assigned the listener (in this case "#a_button"). event.target , however, is the element that actually raised the event, which could be the #a_button child node.

So $(this) is what you are looking for.

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

Answer 3

I built a small example to demonstrate how this and e.target : http://jsfiddle.net/xZAVa/

Answer 4

In my experience, I would go with the following:

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

this in the context of your click callback method is a reference to a DOM event. Since you already have a reference to the DOM object, trival can convert it to a jQuery object, since no search is required.

But on the side of the note, if you don't need to use jQuery in your callback then don't do this. You can simply get the button value using the standard JS this.currentTarget.value .

Other examples you mentioned require a DOM lookup, and depending on the complexity of your selector, it may take longer. Using id-based searches like '#a_button' will work better than using a class-based .myClass like .myClass .