Pass Argument to addEventListener

Consider the scenario where you have a shared function (example log function below) that you want to call after some event occurs, like a click on a particular button.

function log(text) {
  console.log(text);
}

Calling Function with Arguments Fires Once

It may seem like this would solve the problem, but it doesn't:

const button = document.getElementById("my-btn");
button.addEventListener("click", log("Hello!"));

When you use log("Hello!") as an argument, it gets executed when the code is parsed, not when the addEventListener function is executed (when the button is clicked).

Using an Anonymous Function

Instead, you can define an anonymous function, and inside it call the log function.

const button = document.getElementById("my-btn");
button.addEventListener("click", function () {
  log("Hello!");
});

This pattern is a result of the API for this particular method (addEventListener). But it's also a common pattern in JavaScript. See here for a broader example and deeper explanation.