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 trialAxel 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
231,186 PointsAre 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
28,558 Pointsandren
28,558 PointsHe 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 toevent.target
. My answer is incorrect. At the time I posted my answer I did not remember the fact that direct and delegated event listeners boundthis
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
231,186 PointsSteven Parker
231,186 PointsOK, 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.
Axel Perossa
13,930 PointsAxel Perossa
13,930 PointsThank you both. I don't understand this however
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
That's what actually kept me thinking and made me post this question.
Axel Perossa
13,930 PointsAxel Perossa
13,930 PointsI 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
231,186 PointsSteven Parker
231,186 PointsYou can make course suggestions directly to the Support staff.