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 trialgeo
4,193 PointsWhy not simply pass getJSON() as a callback to the event listener?
At around 3:30 in the video:
// Instead of passing an anonymous arrow function as a callback to the event listener
// which then calls getJSON() inside its body:
btn.addEventListener('click', () => getJSON(astrUrl));
// Why don't we just directly pass getJSON() itself as a callback like this:
btn.addEventListener('click', getJSON(astrUrl));
Is it because in a different use case (other than the one shown here) we would need to have access to the event object
that is somehow implicitly present (?) as an argument in the anonymous arrow function?
btn.addEventListener('click', (event) => {
// do sth. with the event argument
getJSON(astroUrl)
});
3 Answers
Daniel Phillips
26,940 PointsWhat you're proposing would try to call getJSON(astrosUrl)
and use what's returned (null) as the callback function for the click event listener. You need to use a callback function as the second argument to addEventListener
so that getJSON has the url you want it to use when the event (click) happens and not before. Event listeners aren't set up to accept an argument to pass to the callback function.
jennyhan
36,121 PointsIt's because you are not passing the function as an argument to addEventListener. Instead, you are returning a callback function from addEventListener.
geo
4,193 PointsHi Jenny and thanks for taking the time to read my question.
I am not sure if I understand correctly what you are saying here.
Unless I am missing something, I cannot see where I am "returning a callback function from addEventlistener
" as you are saying above.
Can you please try to rephrase?
Thanks in advance.
Farid Lavizadeh
12,006 PointsUnless a named function is tied to an event, it will just run without the event occurring. Since getJSON(astrosUrl) is not tied to any event, it will run before a user clicks anything. To tie the named function to an event, a preceding anonymous function is used.
Moritz Wallawitsch
736 PointsMoritz Wallawitsch
736 PointsHi Daniel, sorry but I don't understand that explanation. Why does it return null and why do I have to use a callback function as a second argument. I thought initializing or passing in the function would work too. Could you explain it for dummies? Perhaps with an example?
edit: found this. Seems like it is just how js works... https://social.msdn.microsoft.com/Forums/en-US/74f75572-0910-42b1-987b-ba4262c0fd77/pass-parameters-to-function-called-with-addeventlistener?forum=winappswithhtml5