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
Ashton Holgate
6,021 PointsConfirmation of 'addEventListener' functionality
I was rather confused by the introduction of using 'e' to represent the clicked event in the callback function, as in the course 'Javascript and the DOM' we had used 'event', but upon further research it seems to be the case that you can use any string to refer to the event: you are naming the event in the callback function.
As such, if 'e' is the event, the const checkbox code could have been e.target instead of event.target:
const checkbox = e.target;
Does this also mean that, instead of using a callback function, one could define the function elsewhere and design it to accept the event as an input? If so they would write it as such?
function checkbox(event) {
const checkbox = event.target;
etc...etc..
}
ul.addEventListener('change', checkbox(event));
I am asking here as I am struggling to understand callback functions by looking at the MDN page on .addEventListener. They don't seem to even define them as callback functions. Instead they call them 'arrow functions'.
I am sure that this is a complicated topic and it will be difficult to explain so appreciate any help on the matter.
Thanks!
1 Answer
Steven Parker
229,732 PointsActually, this is not too complicated. And you're right, the parameter name isn't important. Whatever you name it will represent the event object when the handler is called. But you'll see that both "event" and "e" are very common names for this parameter.
What makes a function a callback is that it is passed as an argument to another function (in this case, to addEventListener). How it is defined does not matter. It could be a previously defined named function, or it could be an anonymous function defined right inside the other function call.
But it is important to pass the function itself and not to invoke it. So in the example above, the last line should be changed to this instead:
ul.addEventListener('change', checkbox);
Notice that the callback function is simply named here and not invoked. The event object will be passed to it later when the event actually occurs.
Ashton Holgate
6,021 PointsAshton Holgate
6,021 PointsOh I see. I had assumed that a 'callback' function was something more complicated. What you are saying is that a callback function is simply a function that was passed as an argument in to another function. The function itself isn't any different, it was just called in a different context.
If this is the case it does seem rather unnecessary to even give it a name. It is just a function and functions can be used as arguments. Is there a more special reason, that makes a callback function different from a regular function, that explains this name? I ask, thinking I know the answer already, because I am rather confused as to why anyone thought it was necessary to call this a 'callback'.
I've googled it. People generally say callbacks are used in cases where you want something to happen in reaction to an 'event'. If this is the case I can't imagine why this functionality is not simply understood as being contained within the .addEventListener function.
I understand exactly what you mean about not invoking the function. Now that you have explained that I can see this is described on the MDN page.
Thank you very much for taking the time to respond!