Event listeners are precisely those things that bridge the gap between humans and webpages. They are the interactions that allow the web page to be reactive to various actions we can take. Whether it be clicking on a submit button to fetch data or hovering your mouse over an element to flip it and reveal information on the other side, event listeners do that for us. There are many uses for this so how do we create them?
There are various event listener methods but the one I will focus on in this is the most widely used, the addEventListener() method. This has three parameters (and an optional fourth):
- An element being given the event listener
- An action triggering the event
- A function
- A boolean (optional)
The first is what you are attaching the event listener to. In the example below we see that the HTML element with an ID of "add-book-button" has been attached to a variable named "addBtn". This "addBtn" is merely a reference to that element so any interaction with it will affect whatever element has that ID.
The second is the triggering event that we declare. In the screenshot above, we see that the event stated is "click". Click is one of many that could be used but is the most common as various forms and buttons will listen for this. Without this, the event listener wouldn't know what specific action it is listening for.
The third is the function that runs once the event is triggered. Using the form example from above, this could be a fetch request that is sent using whatever data has been entered into the desired fields. Functions here could be anonymous using the common arrow function or could be named. It is best to use an anonymous function if you know this is only going to be used once, otherwise you should declare the function and invoke it here. Both are depicted below.
In all of the examples shown above, the targets for each event are HTML elements but it is important to note that almost any element can be the event target. They can also handle multiple event handlers. Some of the most common events are Mouse events which consist of:
- click
- dbclick
- mousemove
- mouseover
- mouseout
- mouseup
- mousedown
An important concept to understand with event listeners is what most will call "bubbling". This only occurs when the event is triggered on a child inside a parent element and will cause the event to bubble up to the parent meaning a click, for example, will trigger on both the child AND the parent elements. There are some events that do not bubble up but most will. Developers will often take advantage of this to decide the order in which events will fire.
While it is important to know how to add event listeners to elements, it is also important to understand how to remove them. Thankfully, this is quite straightforward using the removeEventListener function. This would look something like this:
When using the removeEventListener function, it is imperative that the function being called after the event stays exactly the same, otherwise the function will not be removed. A second option to remove event listeners is to actually make them useable only once. In the addEventListener function, there is an optional third parameter with a property called once. When set to true, the event listener will only run one time, thus essentially removing it after. There is one other, but much less common, option to removing an event listener and that is through the AbortController. This will use a count that when a certain limit is met, the function will be aborted and the event listener removed. Though less common, AbortController can be very useful in certain situations.
This can be a difficult concept to understand at first. When I was first learning about it, how I was able to understand it was picturing a piece of tape that you attach to each element for it to carry. It will stick with it until you rip it off. Event listeners are incredibly important because they are the representation of human interactivity with the interface that you build. Without them, it would be much more difficult to transfer data and, more importantly, the webpages wouldn't be nearly as engaging. When building websites, it is important to remember that it is another human that is going to be navigating your sites. Do all you can to kindle that fire of curiosity and wonder as they venture through your website.
Top comments (0)