Understanding The JavaScript Event Model (part 1) - Red Alert (Page 4 of 9 )
The "document" object refers to the document body, or the Web page itself. When this page loads into the Web browser (or when the browser leaves a page for a new one), an event is triggered, which may be captured and processed by appropriate JavaScript.
Here's a quick example, which pops up a dialog box when the page has finished loading.
<html>
<head>
<script language="JavaScript">
function redAlert()
{
alert("Page successfully loaded");
}
</script>
</head>
<body onLoad="redAlert()">
</body>
</html>
The onLoad and onUnload event handlers for the "document" object are usually placed in the <body> tag. Once the page has finished loading, the onLoad handler is triggered, the redAlert() JavaScript function is invoked and an alert box is generated.
You can also run a function when the user leaves a Web page with the onUnload handler - as the following example demonstrates:
<html>
<head>
<script language="JavaScript">
function redAlert()
{
confirm("Are you sure you want to leave this Web page?");
}
</script>
</head>
<body onUnload="redAlert()">
</body>
</html>
onLoad and onUnload can be used individually, or together.
In order to simplify the entire process and save time, you can place JavaScript code within the event handler invocation itself - as the following rework of the example above demonstrates:
<html>
<head>
</head>
<body onLoad="javascript:alert('This is simpler, right?')"> </body>
</html>
Yes, it is. Though only so long as you have a couple of lines of code to be executed - anything more complicated, and you're better off putting it into a function.
Next: Mouse Hunt >>
More JavaScript Articles
More By Team Melonfire, (c) Melonfire
/ 35 
