JavaScript Events are items that transpire based on an action. A document event is the loading of an HTML document. A form event is the clicking on a button. Events are objects with properties.
Example:
<html>
<head>
<script type="text/javascript">
<!--
function popup() {
alert("Hello World")
}
//-->
</script>
</head>
<body>
<input type="button" value="Click Me!" onclick="popup()"><br />
<a href="#" onmouseover="" onMouseout="popup()">
Hover Me!</a>
</body>
</html>
With the button we used the event onClick event as our desired action and told it to call our popup function that is defined in our header. To call a function you must give the function name followed up with parenthesis "()".
The HTML 4 specification refers to these as intrinsic events and defines 18 as listed below:
| Event Handler | Event that it handles |
onBlur | User has left the focus of the object. For example, they clicked away from a text field that was previously selected. |
onChange | User has changed the object, then attempts to leave that field (i.e. clicks elsewhere). |
onClick | User clicked on the object. |
onDblClick | User clicked twice on the object. |
onFocus | User brought the focus to the object (i.e. clicked on it/tabbed to it) |
onKeydown | A key was pressed over an element. |
onKeyup | A key was released over an element. |
onKeypress | A key was pressed over an element then released. |
onLoad | The object has loaded. |
onMousedown | The cursor moved over the object and mouse/pointing device was pressed down. |
onMouseup | The mouse/pointing device was released after being pressed down. |
onMouseover | The cursor moved over the object (i.e. user hovers the mouse over the object). |
onMousemove | The cursor moved while hovering over an object. |
onMouseout | The cursor moved off the object |
onReset | User has reset a form. |
onSelect | User selected some or all of the contents of the object. For example, the user selected some text within a text field. |
onSubmit | User submitted a form. |
onUnload | User left the window (i.e. user closes the browser window). |
The events in the above table provide you with many opportunities to trigger some JavaScript from within your HTML code.
