JavaScript events make web pages interesting and interactive. They enable web pages to respond to user clicks, input, mouse movements, and other operations. This article will introduce you to more than 50 important JavaScript events, allowing you to better control web page behavior.

Mouse Events

click

Triggered when the user clicks an element.

document.getElementById("myButton").addEventListener("click", () => {
  alert("Button clicked!");
});

dblclick

Triggered when the user double-clicks an element.

document.getElementById("myDiv").addEventListener("dblclick", () => {
  alert("Area double-clicked!");
});

mousedown

Triggered when the user presses a mouse button.

document.addEventListener("mousedown", (event) => {
  console.log("Mouse button pressed:", event.button);
});

mouseup

Triggered when the user releases a mouse button.

document.addEventListener("mouseup", () => {
  console.log("Mouse button released");
});

mousemove

Triggered when the user moves the mouse over an element.

document.addEventListener("mousemove", (event) => {
  console.log("Mouse position:", event.clientX, event.clientY);
});

mouseenter

Triggered when the mouse enters an element.

document.getElementById("myDiv").addEventListener("mouseenter", () => {
  console.log("Mouse entered the area");
});

mouseleave

Triggered when the mouse leaves an element.

document.getElementById("myDiv").addEventListener("mouseleave", () => {
  console.log("Mouse left the area");
});

wheel

Triggered when the user uses the mouse wheel.

document.addEventListener("wheel", (event) => {
  console.log("Wheel event:", event.deltaY);
});

Keyboard Events

keydown

Triggered when the user presses a key on the keyboard.

document.addEventListener("keydown", (event) => {
  console.log("Key pressed:", event.key);
});

keyup

Triggered when the user releases a key on the keyboard.

document.addEventListener("keyup", (event) => {
  console.log("Key released:", event.key);
});

keypress

Deprecated. Triggered when the user presses a character key.

document.addEventListener("keypress", (event) => {
  console.log("Key pressed:", event.key);
});

Form Events

submit

Triggered when the user submits a form.

document.getElementById("myForm").addEventListener("submit", (event) => {
  event.preventDefault(); // Prevent the default form submission behavior
  console.log("Form submitted!");
});

change

Triggered when the user changes the content of an input box.

document.getElementById("myInput").addEventListener("change", (event) => {
  console.log("Input box content changed:", event.target.value);
});

input

Triggered in real-time when the user enters content (i.e., immediately when the content changes).

document.getElementById("myInput").addEventListener("input", (event) => {
  console.log("Input box content:", event.target.value);
});

focus

Triggered when an input box gets focus.

document.getElementById("myInput").addEventListener("focus", () => {
  console.log("Input box got focus");
});

blur

Triggered when an input box loses focus.

document.getElementById("myInput").addEventListener("blur", () => {
  console.log("Input box lost focus");
});

Window and Document Events

load

Triggered when the entire page is loaded, including all dependent resources.

window.addEventListener("load", () => {
  console.log("Page fully loaded");
});

resize

Triggered when the browser window size changes.

window.addEventListener("resize", () => {
  console.log("Window size changed:", window.innerWidth, window.innerHeight);
});

scroll

Triggered when the user scrolls the document.

window.addEventListener("scroll", () => {
  console.log("Page scrolled");
});

unload

Triggered when a document or a sub-resource is unloaded.

window.addEventListener("unload", () => {
  console.log("Page unloaded");
});

beforeunload

Triggered when the user is about to leave the page. It can be used to prompt the user whether to confirm leaving.

window.addEventListener("beforeunload", (event) => {
  event.preventDefault();
  event.returnValue = "Are you sure you want to leave?";
});

Touch Events

touchstart

Triggered when the user touches the touchpad.

document.addEventListener("touchstart", (event) => {
  console.log("Touch started");
});

touchmove

Triggered when the user moves a finger on the touchpad.

document.addEventListener("touchmove", (event) => {
  console.log("Touch moved");
});

touchend

Triggered when the user removes a finger from the touchpad.

document.addEventListener("touchend", (event) => {
  console.log("Touch ended");
});

Clipboard Events

copy

Triggered when the user copies content.

document.addEventListener("copy", () => {
  console.log("Content copied to clipboard");
});

cut

Triggered when the user cuts content.

document.addEventListener("cut", () => {
  console.log("Content cut to clipboard");
});

paste

Triggered when the user pastes content.

document.addEventListener("paste", () => {
  console.log("Content pasted from clipboard");
});

Media Events

play

Triggered when a media starts playing.

const video = document.getElementById("myVideo");
video.addEventListener("play", () => {
  console.log("Video is playing");
});

pause

Triggered when a media pauses.

video.addEventListener("pause", () => {
  console.log("Video paused");
});

ended

Triggered when a media finishes playing.

video.addEventListener("ended", () => {
  console.log("Video playback ended");
});

volumechange

Triggered when the volume changes.

video.addEventListener("volumechange", () => {
  console.log("Volume changed to:", video.volume);
});

canplay

Triggered when the browser is able to play a media.

video.addEventListener("canplay", () => {
  console.log("Browser can play the video");
});

canplaythrough

Triggered when the browser is able to play the entire media.

video.addEventListener("canplaythrough", () => {
  console.log("Browser can play the entire video");
});

durationchange

Triggered when the media duration changes.

video.addEventListener("durationchange", () => {
  console.log("Video duration changed");
});

emptied

Triggered when the media data is emptied.

video.addEventListener("emptied", () => {
  console.log("Video data emptied");
});

error

Triggered when a media fails to load.

video.addEventListener("error", () => {
  console.log("Video loading failed");
});

loadeddata

Triggered when the media data is loaded into the browser.

video.addEventListener("loadeddata", () => {
  console.log("Video data loaded");
});

loadedmetadata

Triggered when the media metadata is loaded into the browser.

video.addEventListener("loadedmetadata", () => {
  console.log("Video metadata loaded");
});

loadstart

Triggered when a media starts to load.

video.addEventListener("loadstart", () => {
  console.log("Video started to load");
});

progress

Triggered when the media loading progress changes.

video.addEventListener("progress", () => {
  console.log("Video loading progress changed");
});

ratechange

Triggered when the media playback rate changes.

video.addEventListener("ratechange", () => {
  console.log("Video playback rate changed");
});

seeking

Triggered when the user is seeking a specific position in the video.

video.addEventListener("seeking", () => {
  console.log("User is seeking a specific position in the video");
});

Custom Events

CustomEvent

Create and trigger custom events.

const event = new CustomEvent("myCustomEvent", { detail: { key: "value" } });
document.dispatchEvent(event);
document.addEventListener("myCustomEvent", (e) => {
  console.log("Custom event triggered:", e.detail);
});

Other Noteworthy Events

focusin

Triggered when an element or any of its child elements gets focus.

document.getElementById("myInput").addEventListener("focusin", () => {
  console.log("Input box or its child element got focus");
});

focusout

Triggered when an element or any of its child elements loses focus.

document.getElementById("myInput").addEventListener("focusout", () => {
  console.log("Input box or its child element lost focus");
});

contextmenu

Triggered when the user clicks the right mouse button.

document.addEventListener("contextmenu", (event) => {
  event.preventDefault(); // Prevent the default right-click menu
  console.log("Custom right-click menu opened");
});

animationstart

Triggered when a CSS animation starts.

document.getElementById("myElement").addEventListener("animationstart", () => {
  console.log("Animation started");
});

animationend

Triggered when a CSS animation ends.

document.getElementById("myElement").addEventListener("animationend", () => {
  console.log("Animation ended");
});

transitionend

Triggered when a CSS transition ends.

document.getElementById("myElement").addEventListener("transitionend", () => {
  console.log("Transition ended");
});

abort

Triggered when the user aborts media loading.

const video = document.getElementById("myVideo");
video.addEventListener("abort", () => {
  console.log("Video loading aborted");
});