TIL: Passing parameters to callback functions

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);