Different Types of Events

Browsers create many kinds of events.

You do not need to memorize every event name, but you should understand the main groups and when they are used.

Mouse Events

Mouse events happen when a user interacts with a mouse or trackpad.

Common mouse events:

1
2
3
4
5
6
7
8
9

const card = document.querySelector(".card");

card.addEventListener("mouseenter", () => {
  card.classList.add("is-hovered");
});

card.addEventListener("mouseleave", () => {
  card.classList.remove("is-hovered");
});

Pointer Events

Pointer events work across mouse, touch, and stylus input.

Common pointer events:

• pointerdown
• pointerup
• pointermove
• pointerenter
• pointerleave

For modern interactive components, pointer events are often a better choice than mouse-only events.

1
2
3
4
5

const box = document.querySelector(".box");

box.addEventListener("pointerdown", () => {
  box.classList.add("is-pressed");
});

Keyboard Events

Keyboard events happen when the user presses keys.

Common keyboard events:

1
2
3
4
5

document.addEventListener("keydown", (event) => {
  if (event.key === "Escape") {
    closeModal();
  }
});

Use event.key for readable key names such as "Enter", "Escape", or "ArrowDown".

Form Events

Form events are essential for interactive forms.

Common form events:

1
2
3
4
5

const email = document.querySelector("#email");

email.addEventListener("input", () => {
  console.log(email.value);
});

input is useful for live updates. change is useful when you only care about the final committed value.

Page and Resource Events

The browser also fires events for page and resource lifecycle changes.

Common examples:

• DOMContentLoaded
• load
• beforeunload
• error
• resize
• scroll

1
2
3

document.addEventListener("DOMContentLoaded", () => {
  console.log("DOM is ready");
});

DOMContentLoaded fires when the HTML has been parsed and the DOM is ready. load waits for additional resources like images too.

Clipboard Events

Clipboard events happen when the user copies, cuts, or pastes.

1
2
3
4
5

const textarea = document.querySelector("textarea");

textarea.addEventListener("paste", (event) => {
  console.log("Pasted content");
});

Do not surprise users by blocking normal clipboard behavior without a strong reason.

Drag and Drop Events

Drag and drop interactions use events such as:

• dragstart
• dragover
• drop
• dragend

1
2
3
4
5
6
7
8

dropZone.addEventListener("dragover", (event) => {
  event.preventDefault();
});

dropZone.addEventListener("drop", (event) => {
  event.preventDefault();
  console.log(event.dataTransfer.files);
});

Drag and drop has its own details, but it still follows the same listener model.

Custom Events

Your code can also create its own events.

1
2
3
4
5

const event = new CustomEvent("cart:updated", {
  detail: { itemCount: 3 }
});

document.dispatchEvent(event);

Custom events are useful when separate parts of a page need to communicate without calling each other directly.

Choosing the Right Event

Ask what user action or browser change you really care about.

Examples:

• use click for button activation
• use submit for form submission
• use input for live typing feedback
• use keydown for keyboard shortcuts
• use scroll carefully for scroll-based UI
• use pointerdown for pointer interactions that should work across devices

Summary

Events cover user input, form activity, page lifecycle, resources, scrolling, resizing, clipboard actions, drag and drop, and custom application signals.

Knowing the main categories helps you choose the right event for the behavior you want to build.