Table of contents
Event Listeners
An event listener in JavaScript allows the webpage to "listen" for specific actions the user takes. When an event listener registers the activity, it passes that information to an event handler which executes some code or function, responding to the user.
Another way to call the actions taken by a user is an event. An event can be attached to an element in the DOM, multiple elements, or even the entire browser. Some common events include the following:
User clicks a button
User changes an option in a dropdown menu
User submits a form
User hovers over something on the webpage
User presses a button on their keyboard
Webpage loads
There are many more events that an event listener can register and for a more exhaustive list, you can check out the link here. There are multiple ways to add an event listener to an element. One of the more common ways to add an event listener to an element, is by attaching the addEventListener() method to the element. Another way is by using the onevent property on the target element, which directly assigns and executes a function when triggered. This blog will cover the usage of addEventListener(), since it is often a preferred method since it allows for multiple listeners to be attached to an event and is more flexible. If you want to read more about the onevent property, check out the link here.
element.addEventListener(type, function, options)
In the above code, the first argument is the type, which is inputted as a string and is used to express the event the webpage should listen for. The second argument is usually a function that is executed when the event is registered. This function tends to be a callback function. The third argument is optional and an object that provides more specification about the event listener. There are several options available: capture, once, passive, etc. To learn more about what these options do, check out the link here. Although there are many different types of events, this blog will delve deeper into click, change, and submit events.
Click Event
The click event is executed when a user "clicks" an element on the page. Although this event is usually associated with a button, it can also be applied to a variety of HTML elements like an image, link, div, etc.
The below shows a simple example of an element in the HTML file being targeted. A click event listener is added with a callback function that console logs "clicked." Although the event object could be explicitly passed into the callback function, when using a click event listener, you often do not see this. In this case, no argument is passed in the callback function.
<button>Click Me</button>
const button = document.querySelector('button')
button.addEventListener('click', () => {
console.log("Clicked")
})
Besides this type of simple function, you could also embed additional functions that trigger more complex operations.
Change Event
The change event is executed when a user "changes" an element on the page. The HTML element <select> is often used with change events. The <select> element can be used to create dropdown menus on a webpage, allowing the user to filter or refine a dataset. Like the click event, a change event follows a similar syntax with a type and callback function being passed as the two arguments.
However, unlike the click event, the change event will often use the event object as a parameter of the callback function. This is because the change event is often used in scenarios where the developer may want to store or recognize the value of the option selected.
The code below provides an example of how to use an event listener on a change event. In this case, when a user selects a color from the dropdown, it triggers the event listener on the <select> element. The event handler then executes a function that targets the value of the option selected and uses it as an argument in a hypothetical function that changes the color of the page.
//Gives the user a dropdown for a color selection
<select>
<option value=””>Select a Color</option>
<option value=”blue">Blue</option>
<option value=”red">Red</option>
<option value=”green">Green</option>
</select>
const select = document.querySelector('select')
select.addEventListener('change', (event) => {
const selectionValue = event.target.value;
changeColorOfPage(selectionValue); //some function that changes the color of the page
})
In addition to using change with the <select> element, it is also used with <input> and <textarea> elements.
Submit Event
The submit event is executed when a user "submits" a <form>. A <form> element allows a user to interact with the webpage and can add additional information to the web page's database. When a submitted event is registered on a form element, it registers the event on the entire element. This is in contrast to other event listeners like click, which registers the event on a specific button or input element.
Although the nuances are slightly different, most forms will have a button that is clicked to trigger the submit event on the form. This is not a click event and instead is a way for the user to notify the server that a form has been submitted.
Below is an example code where an event listener is placed on the form element. When the "Submit" button is clicked, the callback function uses the method .preventDefault() to prevent the default behavior of a form submission, a page reload. Then the function targets the value of the HTML input element by accessing it through the element id. This allows the function to obtain the value of what the user inputted. Finally, the function console logs the inputted name.
<form>
<label for="name">Name:</label>
<input type="text" id="name" placeholder="Enter your name">
<button type="submit">Submit</button>
</form>
const form = document.querySelector('form')
form.addEventListener('submit', (event) => {
event.preventDefault(); //prevents default page reload
const nameInput = event.target.name.value; //targets the value of the input
console.log(nameInput);
})
Conclusion
Event listeners are a great way to add interactivity to webpages. It allows the user to interact with the server and various elements to trigger response actions. Event listeners provide developers with a method of executing more complex code that can make a webpage more dynamic. This blog only covers a few of the most common event listeners, but there are many more that serve a unique purpose and only enhance a webpage. By continuing to expand your knowledge of event listeners, you can further your skills as a developer and build even better webpages that improve user experience.
Before you go, see below for some example code showcasing a dropdown with the "change" event listener. See if you can build your own functions for the "click" and "submit" event listeners!