Today I tried to move an Event Listener callback function to it’s own module. It seemed simple enough. Take the following code example:
app.js
element.addEventlistener("submit", (event) => {
event.preventDefault();
});
Now, my callback was a little more complex so it made sense to move to a module. The question then became why it didn’t work when I tried the following:
app.js
element.addEventListener("submit", eventHandler(event));
eventHandler.js
function eventHandler(event) {
event.preventDefault();
}
I would get an error from app.js saying that event is not defined. After a little research I discovered on the MDN guide for addEventListener that you need to pass parameters using an anonymous function. My eventHandler() was fine – the issue was in the way I passed the parameter to the function in the callback. To fix it this was the solution:
app.js
// Arrow function syntax
element.addEventListener("submit", (event) => {
eventHandler(event);
});
// Full function syntax
element.addEventListener("submit", function(event) {
eventHandler(event);
});
Edit: turns out there is an even simpler approach when you’re only sending a single parameter – just don’t add the parameter to the callback function at all. This is also valid and you will still be able to access the parameter in the callback:
element.addEventListener("submit", eventHandler);