Javascript questions
Hey, i have a few questions about javascript:
1) Why do people not recommend
onclick but rather adding an event listener? What are the differences?
2) Given the example in the codepen, the code increments a counter when a button is clicked. Why is it that inside of the event listener, i have to wrap calling incrementCount() in an arrow function, like so: incrementButton.addEventListener("click", () => incrementCount()), rather than incrementButton.addEventListener("click", incrementCount()) for it to work? If i don't the button doesn't do anything and the count variable is automatically upped to 1 upon page load? https://codepen.io/deerCabin/pen/mdNVBGE
Thank you in advance.16 Replies
1) Because interactivity should live in Javascript, not in HTML.
2) You don't, you can just pass incrementCount without the calling brackets.
With the second one, why is that the case? I assumed that would make it look for a variable with the name
incrementCount? I thought you had to have the brackets to call the function?a function is also a reference in javascript, so you can pass it to other functions. The brackets are necessary to call the function, but in case of
addEventListener and other functions that take callbacks as a parameter, you're not actually calling the callback, you're just passing it in to be called under certain circumstances (when an event fires, when an action fails or succeeds, for each array element from another parameter, stuff like that)
so you also cannot have a function called incrementCount and then also have a variable with the name incrementCount in the same scopeAhh I see. Thank you
1- because it sucks!
and it's not just because of what jochem said
it actually sucks really bad
if you set an
onclick in html, and an onclick in javascript, it will overwrite the onclick in html
and if you need multiple event listeners, as it happens sometimes, using addEventListener will also overwrite the onclick
unless it is in very very very specific situations, you should avoid using onclick and similar event handlers like the plagueAh okay I see, in what specific situations would you use onclick?
none
but, for example,
onload can be super super super useful for scripts and images and other dynamically loaded mediaI think it's because onclick is for the computer mouse but if the user is using a tab function (accessiblity) or another device like a phone or tablet there is no "click"
the click is emulated if you press space
that's not the reason why
oh that's fair enough then, thanks
quickly going back to my second question. Jochem said i can pass the function without the brackets, but what do the brackets do that make the result not go as expected?
he said "calling brackets" when he meant "parenthesis", as there is no such thing as "calling brackets"
{} <-- these are brackets
() <-- these are parenthesys
but to answer the question, there are the following variants that you could write:
- incrementButton.addEventListener("click", () => incrementCount()) <-- you're passing an arrow function that then calls the function incrementCount
- incrementButton.addEventListener("click", incrementCount()) <-- you're calling the function incrementCount (notice the parenthesis) and then the returned value is being used as the callback value
- incrementButton.addEventListener("click", incrementCount) <-- you're passing the function incrementCount as the callback value
these are the differences between both:
- the 1st and 3rd will execute incrementCount only when the event is triggered
- the 2nd one will execute incrementCount before the event is triggered, as the callback value is the return value from incrementCountah okay that makes sense. thank you for the info
In Jochems defence he might have meant to type "curly" brackets
curly brackets are brackets
{} <-- these
yes, I am just trying to justify why he typed "calling". Either a typo or an autocorrect.
curly braces can be another name that people use
yes
it happens
you're welcome