addEventListener Events List

Introduction

If you have been using addEventListener to attach events to your DOM elements, you might wonder what are the type of events thats valid?

In this post I will go through all of the event types and the descriptions and targets that they accept!

The addEventListener method, a powerful tool that enables developers to listen for and respond to a wide range of events triggered by user interactions, system events, or even custom triggers.

The addEventListener syntax

If you have been following tutorials online, you might see some common event types :

• Click events - “click” this captures user clicks - commonly with mouse or touch devices
• Key events - keyboard inputs for enhanced user experiences.
• Mouse events - Tracking mouse movements, clicks, and scrolls.
• Form events - form submissions, input changes, and validations.
• Touch events - touch events for mobile devices.

The specifications state that the function will only work for elements that support events.

The syntax will look like this:

addEventListener(type, listener, options)

• type is a string of a “event type” and case-sensitive. So this means that ‘Click’ (and will not work) is different to ‘click’. You can see all possible event types here: Events
• listener is a function reference.

A common way to use “addEventListener” is as follows:

    let button = document.querySelector('#myButton');
    button.addEventListener('click', function() {
        console.log('Button clicked!');
    });

What can trip you up is that the “listener” parameter has to be a function REFERENCE - and not function CALL

List of all event types

Here is the list of all event types that you can pass into the “addEventListener” function.

Keep in mind that the event type as to be case-sensitive!

References

• https://html.spec.whatwg.org/multipage/indices.html#event-change
• https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener