Home arrow JavaScript arrow Page 4 - Understanding The JavaScript Event Model (part 1)

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:
  1. Understanding The JavaScript Event Model (part 1)
  2. Popeye() And Olive()
  3. Handling Things
  4. Red Alert
  5. Mouse Hunt
  6. Forty Two
  7. Flavour Of The Month
  8. Linking Up
  9. Game Over
By: Team Melonfire, (c) Melonfire
Rating: starstarstarstarstar / 36
June 25, 2002

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

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

 
 
>>> More JavaScript Articles          >>> More By Team Melonfire, (c) Melonfire
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

JAVASCRIPT ARTICLES

- Javascript for Beginners: An Introduction
- Introduction to JavaScript
- Adding Elements to a Tree with TreeView jQue...
- Using the Persist Argument in a TreeView jQu...
- Using Unique and Toggle in a TreeView jQuery...
- Using Event Delegation for Mouseover Events ...
- Using the Animate Option in a Treeview jQuer...
- Using HTML Lists with Event Delegation in Ja...
- Opened and Closed Branches on a TreeView jQu...
- Mouseover Events and Event Delegation in Jav...
- Creating a TreeView JQuery Hierarchical Navi...
- Event Delegation in JavaScript
- A Look at the New YUI Carousel Control
- Working with Draggable Elements and Transpar...
- Displaying Pinned Handles with Resizable Con...

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: