Red Alert - JavaScript

This may be news to you, but JavaScript comes with a powerfuland flexible event model, one which provides developers with astandardized way of trapping and handling client-side events likekeystrokes and mouse clicks. This two-part article takes an in-depthlook at how this event model works, demonstrating some practical (andnot-so-practical) uses of the most common event handlers.

TABLE OF CONTENTS:

By: Team Melonfire, (c) Melonfire

Poor Best

Rating:

/ 36

June 25, 2002

print this article

SEARCH DEV SHED

TOOLS YOU CAN USE

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 >>