Global Event Attributes are HTML attributes that can be added to almost any HTML element. They are used to execute JavaScript code when a specific "event" occurs (such as a user clicking a button, hovering over a picture, or a page finishing loading).
These events fire for the window object, meaning they apply to the entire browser window/tab, rather than a specific text paragraph or image. They usually belong on the <body> tag.
| Attribute | Description |
|---|---|
onafterprint | Script to be run after the document is printed |
onbeforeprint | Script to be run before the document is printed |
onerror | Script to be run when an error occurs while loading an external file |
onhashchange | Script to be run when there has been changes to the anchor part of a URL |
onload | Script to be run when an element is completely loaded entirely |
onoffline | Script to be run when the browser starts to work offline |
ononline | Script to be run when the browser starts to work online |
onresize | Script to be run when the browser window is resized |
onunload | Script to be run when the user navigates away from the page |
These events fire by actions taking place inside HTML Forms (like typing in input fields, clicking submit, or changing a dropdown selection).
| Attribute | Description |
|---|---|
onblur | Fires the moment that a form element loses focus (the user clicks somewhere else) |
onchange | Fires the moment the value of the element changes (great for dropdowns) |
oncontextmenu | Script to be run when a context menu is triggered (user right-clicks) |
onfocus | Fires the moment an element gets focus (the user clicks into the text box) |
oninput | Script to be run immediately when an element gets user input (triggers exactly on keystroke) |
oninvalid | Script to be run when an element is considered invalid based on HTML built-in validation |
onreset | Fires when the Reset button in a form is clicked |
onsearch | Fires when the user writes something in a search field (for <input type="search">) |
onsubmit | Fires when a form is naturally submitted |
These events fire based on physical keyboard interactions by the user.
| Attribute | Description |
|---|---|
onkeydown | Fires the exact moment a user is physically pressing a key down |
onkeypress | Fires when a user presses a key (deprecated in modern JavaScript, use onkeydown instead) |
onkeyup | Fires the exact moment the user physically releases a key |
These events fire when the user interacts with their mouse or trackpad.
| Attribute | Description |
|---|---|
onclick | Fires when the user clicks cleanly on an element |
ondblclick | Fires when the user double-clicks on an element |
onmousedown | Fires the exact moment a mouse button is pressed down over an element |
onmouseenter | Fires when the mouse pointer is moved directly onto an element |
onmouseleave | Fires when the mouse pointer is moved out of an element |
onmousemove | Fires continuously as the mouse pointer is moving while it is over an element |
onmouseover | Similar to onmouseenter, but it also triggers when entering child elements |
onmouseout | Similar to onmouseleave, but it also triggers when leaving child elements |
onmouseup | Fires the exact moment a mouse button is released over an element |
onwheel | Fires when the mouse wheel rolls up or down over an element |
These events correspond to the HTML5 Drag and Drop API.
| Attribute | Description |
|---|---|
ondrag | Script to be run when an element is physically being dragged |
ondragend | Script to be run exactly at the end of a drag operation |
ondragenter | Script to be run when a dragged element boldly enters a valid drop target area |
ondragleave | Script to be run when a dragged element leaves a valid drop target area |
ondragover | Script to be run constantly while a dragged element is hovering over a valid drop target area |
ondragstart | Script to be run strictly at the start of a drag operation |
ondrop | Script to be run when dragged element is released (dropped) onto a drop target |
onscroll | Script to be run when an element's scrollbar is being scrolled |
<button onclick="myFunc()">) is completely valid and great for beginners, professional JavaScript developers usually prefer to attach events completely remotely using addEventListener() inside their JS files instead, keeping the HTML perfectly clean.