Most Used DOM Events in JavaScript

In JavaScript, the browser and the DOM provide a large number of available events.

For example, this allows us to react to occurrences such as the completion of a document load, or a user’s action with the mouse or keyboard.

Let’s look at some of the categories of events, along with their most common events 👇.

Window Events

These events are related to the window object and its state:

window.addEventListener('resize', function(event) {
    console.log('Window size changed');
});

Load and Unload Events

These events are related to the loading and unloading of resources:

Example:

document.addEventListener('DOMContentLoaded', function(event) {
    console.log('DOM fully loaded and parsed');
});

Mouse Events

These events are related to actions performed with the mouse. Some of the most common mouse events are:

document.getElementById('myButton').addEventListener('click', function(event) {
    alert('Button clicked');
});

Drag and Drop Events

These events are related to dragging and dropping elements on a web page.

They are commonly used to implement interactive interfaces that allow moving elements from one place to another.

const draggableElement = document.getElementById('draggable');
const container = document.getElementById('container');

// Set up the draggable element
draggableElement.addEventListener('dragstart', function(event) {
    event.dataTransfer.setData('text', event.target.id);
    console.log('Drag started');
});

// Set up the container as a valid drop target
container.addEventListener('dragover', function(event) {
    event.preventDefault(); // Necessary to allow the drop
    console.log('Dragged element over the container');
});

container.addEventListener('drop', function(event) {
    event.preventDefault();
    const id = event.dataTransfer.getData('text');
    const element = document.getElementById(id);
    container.appendChild(element);
    console.log('Element dropped in the container');
});

Keyboard Events

These events are related to actions performed with the keyboard:

document.addEventListener('keydown', function(event) {
    console.log(`Key pressed: ${event.key}`);
});

Form Events

These events are related to interaction with HTML forms:

document.getElementById('myForm').addEventListener('submit', function(event) {
    event.preventDefault(); // Prevents the form from being submitted
    console.log('Form submitted');
});

Media Events

These events are related to media playback (audio and video):

const videoElement = document.getElementById('myVideo');

videoElement.addEventListener('play', function(event) {
    console.log('The video is playing');
});