HTML Event Reference
Events are things that happen in the browser: a click, a key press, a page loading. Every event can be handled with an on... attribute, or with JavaScript.
Window and document events
| Attribute | When it fires |
|---|
onload | The page (or element) finished loading. |
onunload | The page is being unloaded. |
onresize | The window was resized. |
onscroll | The page was scrolled. |
onerror | An error occurred. |
onhashchange | The hash in the URL changed. |
onpageshow / onpagehide | User navigates to/away from the page. |
onpopstate | The history entry changed. |
onstorage | Web storage changed. |
onbeforeunload | Just before the page closes. |
onoffline / ononline | The internet connection dropped/came back. |
Mouse events
| Attribute | When it fires |
|---|
onclick | The element was clicked. |
ondblclick | Double-clicked. |
onmousedown | A mouse button was pressed. |
onmouseup | A mouse button was released. |
onmousemove | The mouse moved over the element. |
onmouseover | The mouse entered the element. |
onmouseout | The mouse left the element. |
onmouseenter / onmouseleave | Entered/left (no bubbling). |
oncontextmenu | Right-click (context menu). |
onwheel | The mouse wheel moved. |
Keyboard events
| Attribute | When it fires |
|---|
onkeydown | A key was pressed down. |
onkeyup | A key was released. |
onkeypress | A key was pressed (older; prefer keydown). |
oninput | An input value changed (fires on every keystroke). |
Form events
| Attribute | When it fires |
|---|
onsubmit | A form was submitted. |
onreset | A form was reset. |
onchange | A field changed and lost focus. |
onfocus | An element gained focus. |
onblur | An element lost focus. |
onselect | Text was selected in a field. |
oninvalid | A required field failed validation. |
onsearch | A search field was searched. |
Drag and drop events
| Attribute | When it fires |
|---|
ondrag | An element is being dragged. |
ondragstart | The drag just started. |
ondragend | The drag ended. |
ondragover | The dragged item is over a drop zone. |
ondragenter | The dragged item entered a drop zone. |
ondragleave | The dragged item left a drop zone. |
ondrop | The item was dropped. |
Clipboard events
| Attribute | When it fires |
|---|
oncopy | Content was copied. |
oncut | Content was cut. |
onpaste | Content was pasted. |
Media events (<audio>, <video>)
| Attribute | When it fires |
|---|
onplay | Playback started. |
onplaying | Playback is actually running. |
onpause | Playback was paused. |
onended | The media finished. |
oncanplay | Ready to play. |
oncanplaythrough | Ready to play without buffering. |
onwaiting | Buffering, waiting for data. |
onloadeddata | The current frame loaded. |
onloadedmetadata | Metadata (length, size) loaded. |
onprogress | The browser is downloading. |
onstalled | Trying to load but no data. |
onsuspend | Download paused. |
onabort | Loading was aborted. |
onerror | A media error occurred. |
onvolumechange | Volume or muted changed. |
onratechange | Playback speed changed. |
ontimeupdate | The play position updated. |
onseeked / onseeking | Seek finished / started. |
ondurationchange | The media length changed. |
onemptied | The media became empty. |
Touch events
| Attribute | When it fires |
|---|
ontouchstart | A finger touched the screen. |
ontouchmove | A finger moved on the screen. |
ontouchend | A finger left the screen. |
ontouchcancel | The touch was interrupted. |
Animation and transition events
| Attribute | When it fires |
|---|
onanimationstart | A CSS animation started. |
onanimationend | A CSS animation finished. |
onanimationiteration | A CSS animation looped. |
ontransitionend | A CSS transition finished. |
Using events in JavaScript (the modern way)
Event attributes like onclick are fine for learning. In real projects, add listeners instead:
var btn = document.getElementById("myButton");
btn.addEventListener("click", function () {
alert("You clicked me!");
});
TL;DR
- Events fire when things happen: clicks, keys, loads, drags, media playback.
- Handle them with
on... attributes or with addEventListener. onclick, onload, onsubmit, onchange are the big ones you'll use daily.- Prefer
addEventListener in real projects.