Javascript Anonymous Functions and Event Listeners

Event listeners and anonymous functions are a few difficult concepts for beginner developers to properly grasp. I am constantly receiving questions regarding these concepts from frazzled and frustrated students. If this sounds like you, fear not, for in this post we will define these concepts, explore their interactions with each other, and discuss potential use cases of each.

Event Listeners: addEventListener() method

What is an event listener? An event listener is a method that we pass upon an object, most often Element, Document, or Window. The method works by adding a function that will be called whenever the specified event is 'heard'. Let's look at a simple example:

let timesClicked = 0;
const newImg = document.createElement('img');
 newImg.addEventListener('click', timesClicked++);

The code above creates an image element, and attaches an event listener that is listening for a click event. When the image element is clicked, the second parameter, timesClicked++, is executed. This will simply increment the variable timesClicked by one with each click.

We often provide a callback function as the second parameter of the event listener. Let's see what that might look like:

function incrementVariable() {
 timesClicked++ };

newImg.addEventListener('click', incrementVariable)

This code will do the exact same thing as the previous example, but instead of providing instructions in the second parameter, we insert just the function name, without any parenthesis. If we add parenthesis at the end of our function, the function will be called when the code is ran. We don't want that, we want the function to execute only on the click event.

Anonymous Functions and Event Listeners

So when do we add parenthesis to our eventListener callback function?

The answer is simple: when we need to pass data from a parent function. Let's look at an example:

function addToNav(array) {
    const navList = document.getElementById('cake-list')
    const navName = document.createElement('li')
    navName.textContent = array.name
    navList.appendChild(navName)
    navName.addEventListener('click', () => {
        displayDetails(array)}

In this function, we have one parameter, which is array. This function takes an array, creates a list element with the name, and appends the list element of the item as a child to the navList. Finally, it adds an event listener, which will listen for a click on the newly created list element. When clicked, it will execute the function displayDetails and pass the array as a parameter.

Here, we use an anonymous function as the second argument of the event listener because we need to pass the array to the callback function in order for the function to properly execute. If we simply point to the function, it will not work. As we need to pass information into displayDetails, we must employ an anonymous function, and pass the 'array' variable as the parameter. This way, our displayDetails function will know which information to display when the list element is clicked.

Event listeners and anonymous functions can be a bit confusing, but don't get discouraged! With some practice, one will find they are much less complex than they appear!