JavaScript HTML Event Example

An example of using JavaScript to react to events.

Input events

onblur - When the user leaves the input field
onchange - When the user changes the content of the input field
onchange - When the user selects a dropdown value
onfocus - When the input field gains focus
onselect - When the input text is selected
onsubmit - When the user clicks the submit button
onreset - When the user clicks the reset button
onkeydown - When the user presses/holds down a key
onkeypress - When the user presses/holds down a key
onkeyup - When the user releases a key
onkeyup - When the user releases a key
onkeydown vs onkeyup - Both

Mouse events

onmouseover/onmouseout - When the mouse passes over an element
onmousedown/onmouseup - When pressing/release the mouse button
onmousedown - When pressing the mouse: hint which element was clicked
onmousedown - When clicking the mouse: hint which button was clicked
onmousemove/onmouseout - When the mouse pointer is moved into/out of the div
onmouseover/onmouseout - When the mouse pointer is moved into/out of the image
onmouseover - When hovering over the image map

Click Event

React to onclick event
onclick - When clicking the button
ondblclick - When double-clicking the text

Load Event

onload - After the page is loaded
onload - After the image is loaded
onerror - When an error occurs while loading the image
onunload - When the document is closed by the browser
onresize - When the browser window size is adjusted

Other

What is the key code of the key pressed?
What are the cursor coordinates?
What are the cursor coordinates relative to the screen?
Is the shift key pressed?
What type of event occurred?

Example Explanation