Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript jQuery Basics Understanding jQuery Events and DOM Traversal What is Traversal?

Posted by Axel Perossa
Axel Perossa
13,930 Points

'this' == event.target ?

In the previous video, andren said

"this within a jQuery event handler essentially maps to event.currentTarget.

The difference between currentTarget and target is that currentTarget will always refer to the element that the event listener is attached to, the p elements with the spoiler class in this case. Whereas target refers to the specific element that actually triggered the event, which in this case is the button element inside the p element.

So in this video this/event.currentTarget points to the p element that contains the button while event.target points to the button itself."

and the Jquery documentations says so too, as far as I could investigate. But in this video Treasure says this == event.target, uses it like that in the code, and seems to work. I'm a bit confused, shouldn't this point to the p element?

1 Answer

Steven Parker
Steven Parker
229,744 Points
Steven Parker
Steven Parker
229,744 Points

Are you sure andren appears in a Treehouse video? Can you provide a link to it?

But according to the jQuery documentation:

When jQuery calls a handler, the this keyword is a reference to the element where the event is being delivered; for directly bound events this is the element where the event was attached and for delegated events this is an element matching selector. (Note that this may not be equal to event.target if the event has bubbled from a descendant element.)

So it seems the type (direct or delegated) of handler will determine if "this" will be equal to the target or the currentTarget.

andren
andren
28,558 Points
andren
andren
28,558 Points

He is referring to an answer I posted for a question on the previous video, I have not appeared in any videos, at least to my knowledge.

Anyway back on topic, the instructor Treasure is correct. In this code this does point to event.target. My answer is incorrect. At the time I posted my answer I did not remember the fact that direct and delegated event listeners bound this differently as most of my jQuery experience lies with direct event handlers.

I do apologize for the confusion my answer produced, I have now gone back and edited it to correct the mistake.

Steven Parker
Steven Parker
229,744 Points
Steven Parker
Steven Parker
229,744 Points

OK, I wondered about that video reference.
I don't appear an any Treehouse videos either, but they talk about me in a couple of them. :wink:

Axel Perossa
Axel Perossa
13,930 Points

Thank you both. I don't understand this however

(Note that this may not be equal to event.target if the event has bubbled from a descendant element.)

Isn't that the case here? The event is bubbling up from the button. In what cases wouldn't it be equal to event.target?

Also I read this in the event.currentTarget documentation page

This property will typically be equal to the this of the function. If you are using jQuery.proxy or another form of scope manipulation, this will be equal to whatever context you have provided, not event.currentTarget

Example: $( "p" ).click(function( event ) { alert( event.currentTarget === this ); // true });

That's what actually kept me thinking and made me post this question.

Axel Perossa
Axel Perossa
13,930 Points

I did a little experiment and I think the binding of this is different for the on() method when you use the second parameter (selector). If you don't use it, it behaves like click(): JSFiddle

Perhaps it's worth a little note in the Teacher's Notes?

Steven Parker
Steven Parker
229,744 Points
Steven Parker
Steven Parker
229,744 Points

You can make course suggestions directly to the Support staff.