JS DOM: List of events

Most used dom events

list the most used dom events, eg the first arg for addEventListener

ai answer

The first argument to addEventListener is the event type string (no on prefix). These are the ones you will use most often.

Mouse / pointer

click

Primary button press + release (also generated by tap)

dblclick

Double-click

mousedown / mouseup

Button down / up

mousemove

Pointer moves (fires very often)

mouseover / mouseout

Pointer enters / leaves (bubbles; also fires on children)

mouseenter / mouseleave

Same, but does not bubble

contextmenu

Right-click (or long-press)

wheel

Mouse wheel / trackpad scroll

pointerdown / pointerup / pointermove

Modern unified events for mouse, touch, and pen

Keyboard

keydown

Key is pressed (repeats while held)

keyup

Key is released

Prefer these over the deprecated keypress. Use event.key (e.g. "Enter", "Escape").

Forms & input

input

Value changes immediately (every keystroke)

change

Value is committed (blur, Enter, or select change)

submit

Form is submitted

focus / blur

Element gains / loses focus (do not bubble)

focusin / focusout

Same, but they bubble

Document / window

DOMContentLoaded

HTML parsed, DOM ready (images/CSS may still be loading)

load

Everything finished (page, images, styles)

resize

Window size changes

scroll

Page or element is scrolled

beforeunload

User is about to leave the page

Touch (mobile)

touchstart, touchmove, touchend — still used, but pointer events are usually the better choice now.

Drag and drop

dragstart, drag, dragend (on the dragged item)
dragenter, dragover, dragleave, drop (on the target)
Remember: dragover needs event.preventDefault() or drop will not fire.

CSS / other

transitionend, animationend — a CSS transition or animation finished.
error — a resource failed to load.

Typical usage

element.addEventListener("click", (event) => {
  // ...
});

document.addEventListener("DOMContentLoaded", () => {
  // safe to query the DOM
});

window.addEventListener("resize", handleResize);

For most UI work, start with click, input, change, keydown, submit, DOMContentLoaded, and scroll/resize. Use pointer events when you need to handle mouse and touch with one set of listeners.