Event & Event Listeners in JavaScript

Chase Anderson — Mon, 16 Dec 2024 18:03:54 +0000

As I near the end of my first phase in my Flatiron School program, I have learned the fundamentals of programming in JavaScript. But in this blog post, I will discuss my experience with my favorite subject yet: Events and Event Listeners.

JavaScript can listen for specific things that can happen in the browser you are working on. There is a great multitude of things that JS can listen to. Some examples include a key press, mouse click, and a form submission, just to name a few of the most used ones. They also serve as a great way to implement asynchronous interaction, the ability for a page to respond to user input without interrupting processes or reloading the page. This is crucial to the function of a web app, in which features like that are expected. What I love the most about events is the fact that they can add a lot of interactivity to the web project you are working on.

Event listeners are JavaScript functions that wait for a specific event to occur on a specified element. Once the event triggers, the event listener will execute a specific block of code (typically called the callback function). The most common way to attach an event listener to an element is to use the addEventListener method.

I will use a personal example that I am currently using in my end-of-phase project. For my project, I have created a simple web app that fetches information from an API and displays it on a web page with interactive elements.

I decided to use the free Amiibo API to create a web app that can filter through all of the Yoshi Amiibos created throughout the years. I loved the idea of using this API, given how Yoshi is my favorite Nintendo character!

Here is an example of how I made this dropdown menu that lets users filter through different Yoshi Amiibos using event listeners!

Here is what my code looks like for this specific function

      const amiiboContainer = document.getElementById('amiibo-container');
      const amiiboDropdown = document.getElementById('amiiboDropdown');
      const amiibos = data.amiibo;

      // Create an array of names for the dropdown search
      const amiiboNames = amiibos.map(amiibo => amiibo.name);

      // Populate the dropdown with Amiibo names
      amiiboNames.forEach(name => {
        const option = document.createElement('option');
        option.value = name;
        option.textContent = name;
        amiiboDropdown.appendChild(option);
      });

      // Display all Amiibos initially
      displayAmiibos(amiibos);

      // Add an event listener to filter Amiibos when the dropdown value changes
      amiiboDropdown.addEventListener('change', (e) => {
        const selectedName = e.target.value;
        const filteredAmiibos = amiibos.filter(amiibo => amiibo.name === selectedName );
        displayAmiibos(filteredAmiibos);
      });
    })

Let me walk you through what is going on in this block of code.

The first thing I did was create an array for the Yoshi Amiibo names.

const amiiboNames = amiibos.map(amiibo => amiibo.name);

This line has a map function that iterates through the items stored in the amiibos array. For each amiibo object, it will take the name property and return a new array with all the Amiibo names.

The next step was to populate the dropdown menu with the Amiibo names.

amiiboNames.forEach(name => {
  const option = document.createElement('option');
  option.value = name;
  option.textContent = name;
  amiiboDropdown.appendChild(option);
});

This block creates an HTML <select> dropdown and fills it with the name of the Amiibos. It iterates over the amiiboNames array using forEach(), then creates an <option> element for each individual Amiibo name.

For each of the names, it:

Creates a new option element.
Sets the value attribute of the option to the Amiibo name.
Sets the visible text (textContent) of the option to the Amiibo name.
Appends our new option element to the dropdown (amiiboDropdown).

After that, I decided that I would want all of the Yoshi Amiibos to display initially before using the filter dropdown.

displayAmiibos(amiibos);

I created this function to display all of the Amiibos on the page whenever the page loads. What this does is pass the entire amiibos array into the function I just created above.

Finally, I had to set up the event listener for the dropdown changes.

amiiboDropdown.addEventListener('change', (e) => {
  const selectedName = e.target.value;
  const filteredAmiibos = amiibos.filter(amiibo => amiibo.name === selectedName);
  displayAmiibos(filteredAmiibos);
});

This is one of the most important parts of the code and is the event listener of this function. This is what allows the page to filter the Amiibos that are displayed on the page based on what is selected in the dropdown menu.

The way that this works is that the addEventListener() function listens for the change event on the amiiboDropdown element (or the <select> dropdown). Whenever the user of the web app selects a new value, or in this case, a specific Yoshi Amiibo, the event will trigger the callback function.

The order in which this works is:

The selectedName variable will store the value of whatever option is selected with e.target.value
It will then filter the amiibos array to make sure it will only include the Yoshi Amiibo that matches with the selectedName.
After filtering, the filteredAmiibos array is then passed to displayAmiibos(), which will then update the UI with the filtered list of Yoshi Amiibos.

Wrapping up

Events and Event Listeners in JavaScript are some of the most important things to know when developing a web app with interactivity. They are great because of that fact alone; it gives an app function and purpose, while giving users the opportunity for a seamless experience.

DEV Community: Chase Anderson

Event & Event Listeners in JavaScript

Wrapping up