Prev Next

DOM Event List

DOM events are actions that occur as a result of user interaction or browser behavior. Below is a comprehensive list of DOM events with their descriptions and examples.

Event List

Event Name Description with Example
load

Triggered when a resource (e.g., image, script) has been fully loaded.

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

Triggered when the document or a resource is being unloaded.

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

Triggered when the browser window is resized.

window.addEventListener("resize", () => {
    console.log("Window resized");
});
focusin

Triggered when an element is about to receive focus.

document.getElementById("input").addEventListener("focusin", () => {
    console.log("Input is receiving focus");
});
focusout

Triggered when an element is about to lose focus.

document.getElementById("input").addEventListener("focusout", () => {
    console.log("Input is losing focus");
});
scroll

Triggered when the user scrolls the document or an element.

document.addEventListener("scroll", () => {
    console.log("Scrolling detected");
});
submit

Triggered when a form is submitted.

document.getElementById("form").addEventListener("submit", (event) => {
    event.preventDefault();
    console.log("Form submitted");
});
dragover

Triggered when an element is being dragged over a valid drop target.

document.getElementById("dropzone").addEventListener("dragover", (event) => {
    event.preventDefault();
    console.log("Dragging over dropzone");
});
dragend

Triggered when a drag operation is finished.

document.getElementById("draggable").addEventListener("dragend", () => {
    console.log("Drag operation ended");
});
error

Triggered when an error occurs during resource loading.

document.getElementById("image").addEventListener("error", () => {
    console.log("Image failed to load");
});

Key Takeaways

  • Event Variety: DOM events cover user interactions, keyboard, mouse, drag-and-drop, resource behavior, and more.
  • Dynamic Event Binding: Use addEventListener to dynamically attach event listeners to DOM elements.
  • Efficient Handling: Managing a wide range of events improves user interactivity and responsiveness.
Prev Next