Event Listeners and How they Work

Welcome!

Whether you are experienced at coding or are just starting, you may find this blog helpful! In my blog, we will be discussing event listeners, how they work, and when to use them. Let us first start with a review of what an event listener is.

What is an Event Listener?

Event listeners are utilized in almost every webpage nowadays and have a variety of uses. To start, events are usually triggered through a user's input like clicking a button or adding text to a form. An event can also occur through other actions like errors occurring. Click here for a full list of events.

Event listeners are a method in which code is executed and the event occurs. The event listener is a function attached to an HTML element using .addEventListener(). Then the event listeners wait for an event to trigger some sort of response.

What is the Event Listener Syntax?

addEventListener(type, listener)

In this code block, we can see we are using addEventListener() to declare what event will need to occur to trigger the listener. Now let us take a look at this being used in some examples.

Example 1:

1 const button = document.querySelector('#button')
2
3 button.addEventListener('click', () => {
4   console.log('I was Clicked')
5 })

What Does This Mean?

In the first line of code, we are defining a variable, button, as the value #button found using .querySelector() on the document. We skip the second line, and the third line of code is using .addEventListener() on the button variable defined in line one to listen for a 'click' event. Looking to line four we can see that when the 'click' event occurs we want to use console.log() to display the message 'I Was Clicked'.

Example 2:

1 const button = document.querySelector('#button')
2 const commentForm = document.querySelector('#form')
3 const comments = document.querySelector('#comment')
4
5 button.addEventListener('click', () => {
6  comments.append(commentForm.textContent)
7 })

How Does This Work?

The first three lines of code all use document.querySelector() to select the elements button, form, and comments. Next in the fifth line of code, we use the same .addEventListener() to listen for a 'click' event of the button variable. The sixth line is where we are telling the .addEventListener() what to do. We are using .textContent to get the text of the commentForm, and then we use .append() to add the text to the comments.

Concluding Thoughts

Event listeners are very useful and will be found on almost every modern webpage! In this blog, we talked about the syntax of .addEventListener(), how to use it with a console.log() to return a string, and how to use it in a more complex way to add comments from a commentForm to the document. The best way to learn is to play around with .addEventListener() and see how it works firsthand. Always remember to "fail fast and fail often", and finally remember to have fun!