Event handlers are a vital tool for web developers, because they allow us to build a script that will run only if and when a specific event occurs. Introduced in HTML 4.0, they add a dynamic element to a website, allowing programs to run in response to your visitors' actions.
| Event Handler | Trigger |
| onabort | Visitor cancels a loading image |
| onblur | An element loses focus (e.g. visitor clicks out of a form field) |
| onchange | Visitor changes the content of a field |
| onclick | Visitor clicks an object with the mouse cursor |
| ondblclick | Visitor double-clicks an object |
| onerror | An error occurs when loading a document or an image |
| onfocus | An element gets focus (e.g. visitor clicks on or tabs into a form field) |
| onkeydown | Visitor presses a key |
| onkeypress | Visitor presses or holds down a key |
| onkeyup | Visitor releases a key |
| onload | A page or an image finishes loading |
| onmousedown | Visitor presses the mouse button |
| onmousemove | Visitor moves the mouse |
| onmouseout | Visitor moves the mouse cursor off an element |
| onmouseover | Visitor moves the mouse cursor onto an element |
| onmouseup | Visitor releases the mouse button |
| onreset | Visitor clicks the Reset button of a form |
| onresize | Visitor resizes the frame or window |
| onselect | Visitor selects a portion of text |
| onsubmit | Visitor clicks the Submit button of a form |
| onunload | Visitor exits the page |
You can insert event handlers directly into HTML tags, like this...
<input type="button" value="Click me!" onclick="alert('You clicked the button!')">
... which will produce the following effect:
