Events

|

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.




 

©2009