A journey into Event Listeners

I was mindlessly scrolling through my favorite time killing website, Amazon, looking at various things I certainly do not need, when I started using the search bar to find a desk buddy to keep me company on this journey to becoming a software engineer. After a ton of different variations on words in the search for my new friend, I finally found the one. My new partner in crime and helpful debugger pal, Sammie the sloth.

I couldn’t click that “Add to Cart” button faster! Of course I had to add a few other things, because who orders just one thing on Amazon at a time? And once I was satisfied with all my unnecessary finds, I purchased all the things and am anxiously awaiting their delivery in 1-2 days.

But it got me thinking, as so many things have since I started bootcamp. How does the browser know what to do when I interact with it? Why is it so bad at finding the things I’m looking for when I search, but still seem to find those things after hours of browsing? When did all those items get in my cart?

Event listeners have entered the chat. In coding so far, I have learned there are multiple ways to implement any given function you are attempting to execute. In our exploration of the building blocks, we started in JavaScript and the most basic manipulation of the browser. JavaScript event listeners proved to be an entertaining and frustrating way to interact with a web page.

What is an event listener?

In JavaScript, event listeners are used to capture and respond to events that occur in the browser. Examples of events include clicking a button, scrolling the page, typing on the keyboard, etc. When an event occurs, the browser creates an event object that contains information about the event, such as the type of event, the element that triggered the event, and any additional data relevant to the event.

Adding event listeners

To add an event listener to an element in JavaScript, you can use the addEventListener method. This method takes two arguments: the type of event you want to listen for (e.g. 'click', 'keydown', etc.), and the function that should be executed when the event occurs. For example:

const myButton = document.querySelector('.myButton');
const click = document.createElement('p');

function handleClick() {
  click.textContent = 'I was clicked!';
}

myButton.addEventListener('click', handleClick);

In this example, we're adding a 'click' event listener to a button element with the ID 'myButton'. The handleClick function will be executed when the button is clicked.

Removing event listeners

To remove an event listener from an element, you can use the removeEventListener method. This method takes the same two arguments as addEventListener: the type of event, and the function that was used as the listener. For example:

const myButton = document.querySelector('.myButton');
const click = document.createElement('p');

function handleClick() {
  click.textContent = 'I was clicked!';
}

myButton.addEventListener('click', handleClick);

// Later, we decide we no longer want to listen for click events on this button:

myButton.removeEventListener('click', handleClick);

In this example, we're removing the 'click' event listener from the myButton element. The handleClick function will no longer be executed when the button is clicked.

A different approach

An issue I ran into with my latest project, was that I didn’t want to actually remove the original event listener, I wanted to remove the ‘Button clicked!’ text after the event, to be able to click a different button instead and show that text.

To accomplish this, it was slightly more complicated than a simple .removeEventListener. I actually had to add a second .addEventListener to the text I wanted to remove, instead of removing the entire event listener.

const myButton = document.querySelector('.myButton');
const click = document.createElement('p');

function handleClick() {
  click.textContent = 'I was clicked!';
}

// Second function to remove the text from the browser

function handleSecondClick() {
  click.textContent = '';
}

myButton.addEventListener('click', handleClick);

//Calling the second function on the text, not the button

click.addEventListener('click', handleSecondClick);

In this example, we set the original text to empty, so that we could insert different text when we clicked a different button and remove the original text, so the screen doesn't get cluttered every time we click a new button.

Until next time..

In my beginner journey, using only 1 page websites to build my foundation, I know there will be more complicated ways to manipulate pages and apps. Mastering event listeners was an important stop on my journey to a better understanding. So I hope this helps you as much as it’s helped me.