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 DOM Scripting By Example Adding and Removing Names RSVP Checkbox

Jesse Dispoto
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jesse Dispoto
Front End Web Development Techdegree Graduate 14,538 Points
Posted by Jesse Dispoto
.a{fill-rule:evenodd;}techdegree seal-36
Jesse Dispoto
Front End Web Development Techdegree Graduate 14,538 Points

const checkbox = event.target, shouldn't it be const checkbox = e.target?

Gil first used e as the parameter for the event handler, but then in order to get what element was clicked, he used const checkbox = event.target when we specified e (not event) as being the parameter in our event handler. I tested the code both ways, e and event, and both seem to work. Just wondering why Gil ended up using event.target when I would suspected most of the time it would be easier to understand and follow allow if using the parameter we specified.

2 Answers

Eric Richard
Eric Richard
8,601 Points

I too had Jesse's question and I think Guil made a mistake here and got lucky.

In theory, the "(e)" in the anonymous function should define the name of the argument being passed to the function. So, that argument should be referenced as "e" and not "event". I theory, Guil's "const checkbox = event.target" should have thrown an error with "event" being undefined.

For example, if I change my anonymous function definition to us "(f) => { }", referencing the variable "e" no longer works, as expected. But referencing "event" still does. So, what does that mean?

"event" must be a variable.

I looked in the JavaScript debugger and I didn't see the "event" variable anywhere obvious. It isn't in local scope. And it wasn't anywhere obvious in the global scope.

But then I found it. window.event is defined in the global scope.

And much like we don't need to use "window" to get to "window.document" and instead can just use "document", that's what's happening here.

So, when Guil used "const checkbox = event.target", what he was actually saying was "const checkbox = window.event.target". Guil got double lucky here. First that there was a variable in global scope that could be used. And second that he didn't need to use the "window." to access this variable.

Digging into the MDN documentation, it describes window.event here:

https://developer.mozilla.org/en-US/docs/Web/API/Window/event

And says:

"You should avoid using this property in new code, and should instead use the Event passed into the event handler function. "

Mark Sebeck
Mark Sebeck
Treehouse Moderator 38,004 Points
Mark Sebeck
Mark Sebeck
Treehouse Moderator 38,004 Points

Thanks Eric. Great write-up. I caught that too while watching the video and was waiting for Guil's code to not work.

Linas Mackonis
Linas Mackonis
7,071 Points
Linas Mackonis
Linas Mackonis
7,071 Points

Hi Jesse,

e and event is the same thing. Most probably Guil forgot to be consistent. Throughout your coding experience you'd notice people naming the event target in various ways. Some use e, some evt and others event. I'd say that until you haven't memorized completely what the event target is, use a full and descriptive name. After you feel comfortable with it, start using shorter version.