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

WTF is React?

A brief introduction to React, along with a list of references for more learning.

Jun 29, 2020

Use Netlify to Host JavaScript Libraries

Netlify is built to host websites, but it can be a handy resource for JavaScript libraries, too.

Nov 30, 2018

How to Run JavaScript on SharePoint Pages

Here's a cool trick to run JavaScript on SharePoint 2010 wiki pages without editing the master page.

Dec 01, 2012