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 theoption
to the Amiibo name. - Sets the visible text (
textContent
) of theoption
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 withe.target.value
- It will then filter the
amiibos
array to make sure it will only include the Yoshi Amiibo that matches with theselectedName
. - After filtering, the
filteredAmiibos
array is then passed todisplayAmiibos()
, 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.
Top comments (0)