event handler vs event listener in JS
Hello, quick clarification, an event handler is the action that happens when a registered event has been triggered? An event listener is the thing that registers an event?
For example,
someButton.addEventListener("click", doSomething )
someButton is now registered, if we click on it, the event handler is triggered which is doSomething?13 Replies
I use the terms interchangeably if I'm entirely honest
yeah, even me π
that's why just wanted to clarify, sometime I have some confusion but I think it doesn't matter, as long as things are working π
MDN refers to the method you pass in as the "listener": https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#syntax
MDN Web Docs
EventTarget: addEventListener() method - Web APIs | MDN
The addEventListener() method of the EventTarget interface
sets up a function that will be called whenever the specified event is delivered to the target.
everyone is going to know what you mean when you say event handler. It's likely just the same name for a different thing, maybe a prefered term from another language?
don't know, when I read sometime it's event listener, sometime event handler, that's why sometime I end up mixing both but yeah you are right doesn't matter
that's my point, people use them interchangeably. They're two different words for the same concept
yep
i use both
sometimes listener, sometimes handler
but i tend to say you add an event listener, but i then call the function the handler
just to add more confusion
Ok, so reading MDN's "Working with events" page I think the difference is as follows:
*
element.onclick = doSomething is the event handler
* element.addEventListener("click", doSomething) is an event listener
Any one element can have only one handler per event (using on[event]) but you can add any number of listeners using the addEventListener() method.that makes sense
The event listener calls the event handler when the event happens.
oh didn't know that
To be fair, I didn't either until you asked!