Understanding The JavaScript Event Model (part 1) - Handling Things (Page 3 of 9 )
Unlike some other programming languages, JavaScript doesn't require you to declare and define functions before they're called. So it's possible to invoke a function via an event handler, and define that function later on in your script - as the following example demonstrates:
<html>
<head>
</head>
<body>
<a href="http://somewhere" onMouseOver="popeye()"
onMouseOut="olive()"><img name="myimage" src="normal.jpg"></a>
<script language="JavaScript">
function popeye()
{
document.myimage.src='hover.jpg';
}
function olive()
{
document.myimage.src='normal.jpg';
}
</script>
</body>
</html>
If modularizing your code into functions isn't really your cup of tea (why ever not?!), you can even have the JavaScript code accompany the event handler directly.
<html>
<head>
</head>
<body>
<a href="http://somewhere"
onMouseOver="document.myimage.src='hover.jpg'"
onMouseOut=" document.myimage.src='normal.jpg'"><img name="myimage"
src="normal.jpg"></a>
</body>
</html>
JavaScript comes with handlers for most common user events...and quite a few uncommon ones. Here's a brief list of the more important ones.
onAbort - invoked when the user aborts the loading of an image by clicking the STOP button
onClick - invoked when the user clicks the specified object
onFocus - invoked when the target object receives focus
onBlur - invoked when the target object loses focus
onMouseOver - invoked when the user passes the mouse over the target object
onMouseOut - invoked when the mouse pointer leaves the target object
onSubmit - invoked when the user clicks the Submit button in a form
onChange - invoked when the user changes the contents of a text field
onSelect - invoked when the user selects the contents of a text field
onReset - invoked when the user clicks the Reset button in a form
onLoad - invoked when the target image or document is loaded
onUnload - invoked when the target image or document is unloaded
Let's now look at these in greater detail.
Next: Red Alert >>
More JavaScript Articles
More By Team Melonfire, (c) Melonfire
/ 35 
