Home

Pass Argument to addEventListener

When using the native addEventListener function, you may often want to pass arguments to the callback function. Anonymous functions are here to help.

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.

Let's Connect

Keep Reading

Mapping Dynamic Object Keys in TypeScript

Dynamic property maps are a super powerful paradigm in JavaScript, but they can be tricky to type correctly with TypeScript.

May 20, 2022

JavaScript for 11ty with esbuild

As your 11ty application evolves, you’ll want more organization with your JavaScript. Here’s a method for bundling together using esbuild.

Sep 30, 2022

Run JavaScript Script Before Another Script

Automatically run scripts with NPM/Yarn before or after another script.

May 09, 2022