HTML DOM Events

DOM Events allow JavaScript to add event listener or event handlers to HTML elements.

Examples
In HTML onclick is the event listener, myFunction is the event handler:

<button onclick="myFunction()">Click me</button>

In JavaScript click is the event, myFunction is the event handler:

button.addEventListener("click", myFunction);

Here's a categorized list of the most common DOM event types:

Mouse Events

Mouse events are DOM events that occur when a user interacts with the mouse—moving it, clicking, hovering, etc. These events let web pages respond to user behavior like clicking buttons, dragging items, or hovering over menus.

Event	Description
click	User clicks on an element
dblclick	User double-clicks on an element
mousedown	Mouse button is pressed down
mouseup	Mouse button is released
mousemove	Mouse is moved over an element
mouseenter	Mouse enters an element (does not bubble)
mouseleave	Mouse leaves an element (does not bubble)
mouseover	Mouse is moved onto an element or its children
mouseout	Mouse is moved out of an element or its children
contextmenu	Right-click opens the context menu

Keyboard Events

Keyboard events are DOM events that occur when a user interacts with the keyboard—pressing or releasing keys. These events are essential for handling things like shortcuts, form navigation, games, and custom input behavior.

Event	Description
keydown	Key is pressed down
keyup	Key is released
keypress	Key is pressed (deprecated – use keydown/keyup)

Input and Form Events

These events are specifically related to user interactions with form controls, like , , , and . They are used to capture user input, validate forms, and respond to changes in form fields.

Event	Description
input	User input changes (works with <input>, <textarea>, etc.)
change	Value of element changes (e.g., after losing focus)
submit	Form is submitted
focus	Element gains focus (does not bubble)
blur	Element loses focus (does not bubble)
focusin	Element gains focus (bubbles)
focusout	Element loses focus (bubbles)
reset	Form is reset

UI Events

UI events (short for User Interface events) are a category of DOM events that are triggered by changes in the browser's user interface—not necessarily due to direct user input like clicks or key presses, but due to things like page loading, resizing, scrolling, and visibility changes.

Event	Description
load	Element (e.g., image, iframe) finishes loading
unload	Page is unloaded (deprecated)
resize	Window is resized
scroll	Element or window is scrolled
error	Error occurs while loading a file