Event Handling in JavaScript: A Beginner’s Guide

In this blog, we will explore the basics of event listeners in JavaScript and also take a look at some of the different types of events that can be handled by event listeners, and how you can use them to create a wide range of interactions and effects.

Event listeners are a powerful feature of JavaScript that allows developers to create interactive and dynamic web pages. They allow you to specify how a web page should respond to certain events that occur, such as the user clicking a button or submitting a form. By binding JavaScript functions to specific events, you can create a wide range of interactions and effects that will enhance the user’s experience of your website.

Event listeners are different from traditional inline event handling, where JavaScript code is added directly to an HTML element’s event attribute, such as onclick or onsubmit. Event listeners are added to elements using JavaScript code, which separates HTML and JavaScript code and makes the codebase more maintainable, scalable, and easy to understand.

Event listeners can be added to any DOM element, such as buttons, links, forms, images, and many more. And also to non-DOM elements such as ‘window’ or ‘document’ object. You can attach an event listener to an element using ‘addEventListener()’ method, which takes three arguments: the type of event to listen for, the function to be executed when the event occurs, and an optional options object. Once an event listener is attached to an element, the specified function will be executed whenever the event occurs.

A simple example that adds an event listener to a button that will execute the ‘runFunction’ when the button is clicked:

const button = document.querySelector("button");
button.addEventListener('click', runFunction);

Event listeners can also be removed using ‘removeEventListener’ method. This method takes the same arguments as ‘addEventListener’ and will remove the specified event listener from the element.

Let’s use ‘removeEventListener’ to remove Event listener from the above button variable.

button.removeEventListener("click", runFunction);

It’s worth noting that the function passed to ‘removeEventListener’ must be the same function that was passed to ‘addEventListener’, otherwise it will not be removed. Also, if the function passed doesn’t have an event listener attached to it, the removeEventListener method will have no effect.

Types of Events that can be handled by Event Listener:

In JavaScript, event listeners can handle a wide variety of events. Some of the most common types of events include:

• Mouse events: These include events such as “click”, “mousedown”, “mouseup”, “mousemove”, “mouseover”, and “mouseout”. These events allow you to detect user interactions with elements on the page using a mouse.
• Keyboard events: These include events such as “keydown”, “keypress”, and “keyup”. These events allow you to detect user interactions with the keyboard, such as when a user presses or releases a key.
• Form events: These include events such as “submit” and “change”. These events allow you to detect when a user submits a form or changes the value of a form element.
• Window events: These include events such as “load”, “resize”, “scroll” and “unload”. These events allow you to detect when a window or an element is loaded, resized, or scrolled, or when the user leaves the page.
• Drag and drop events: These include events such as “dragstart”, “drag”, “dragend”, “dragenter”, “dragover”, “dragleave”, and “drop”. These events allow you to create drag-and-drop functionality on your web pages.
• Touch events: These include events such as “touchstart”, “touchmove”, “touchend”, and “touchcancel”. These events allow you to detect user interactions with touch screens and mobile devices.
• Media events: These include events such as “play”, “pause”, “ended” and “timeupdate”. These events allow you to detect when a media element such as a video or audio starts, stops or updates its current time.
• Custom events: JavaScript also allows you to create custom events using the ‘CustomEvent’ constructor. This allows you to create events that are specific to your application and can be used to communicate between different parts of your code.

Different types of events have different properties and methods associated with them, and they can be used in different ways. Understanding the different types of events and their properties is an important part of being able to effectively handle events in JavaScript.