Most Used DOM Events in JavaScript

4 min
Intermediate

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

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

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

Window Events

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

Event	Triggers when
load	The window’s content and all its resources have finished loading.
resize	The window’s size changes.
scroll	The window’s content is scrolled.
unload	The window is closed or navigation to a new page occurs.

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

Copied!

Load and Unload Events

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

Event	Triggers when
DOMContentLoaded	The DOM content has been loaded and parsed, but before stylesheets, images, and subframes are loaded.
beforeunload	Before the page is unloaded, allowing a confirmation message to be displayed.

Example:

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

Copied!

Mouse Events

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

Event	Triggers when
click	The user clicks on an element.
dblclick	The user double-clicks on an element.
mousedown	The user presses a mouse button over an element.
mouseup	The user releases a mouse button over an element.
mousemove	The user moves the mouse over an element.
mouseenter	The mouse enters the area of an element.
mouseleave	The mouse leaves the area of an element.

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

Copied!

Drag and Drop Events

These events are related to drag and drop actions on a web page.

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

Event	Triggers when
dragstart	The user starts dragging an element.
drag	The user drags an element (fires continuously while the element is being dragged).
dragend	The user releases the element being dragged.
dragenter	A dragged element enters a valid drop target area.
dragover	A dragged element moves within a valid target area.
dragleave	A dragged element leaves a valid drop target area.
drop	A dragged element is dropped on a valid drop target.

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');
});

Copied!

Keyboard Events

These events are related to actions performed with the keyboard:

Event	Triggers when
keydown	The user presses a key.
keyup	The user releases a key.
keypress	The user presses a key that produces a character.

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

Copied!

Form Events

These events are related to interaction with HTML forms:

Event	Triggers when
submit	A form is submitted.
change	The value of a form field changes.
input	The user enters or modifies the value of a field.
focus	A form field receives focus.
blur	A form field loses focus.

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

Copied!

Media Events

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

Event	Triggers when
play	Media playback starts.
pause	Media playback is paused.
ended	Media playback ends.
volumechange	The media volume changes.

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

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

Copied!