↑
Main Page

load and unload events

The

resize

event, which fires on a

window

or frame when it is resized.

The

scroll

event, which fires on any element with a scrollbar when the user scrolls it. The

<body/>

element contains the scrollbar for a loaded page.

The

focus

event, which fires on any element or on the

window

itself when it gets focus (the user

clicks on it, tabs to it, or otherwise interacts with it).

The

blur

event, which fires on any element or on the

window

itself when it loses focus.

The load and unload events

The

load

event is probably used most often because DOM manipulation can’t take place until the entire

page has been loaded. Two methods define an

onload

event handler for a

window

. First, you can use

JavaScript and assign it to the

window

object:

<html>

<head>

<title>Onload Example</title>

window.onload = function () {

alert(“Loaded”);

};

</script>

<body>

</body>

</html>

The second way is to assign it in the HTML on the

<body/>

element:

<html>

<head>

<title>Onload Example</title>

</body>

</html>

Confused? The problem here is that the

load

event actually happens on the window, which is why the

event handler is defined on the

window

object using JavaScript. In HTML, however, there is no code rep-

resentation of the

window

object, so the HTML gurus decided that the handler should be assigned on

the

<body/>

element and then placed on the

window

object behind the scenes. So, if you set the

onload

event handler on the

<body/>

element and then check the

window.onload

property, you see the follow-

ing code has been placed there:

<html>

<head>

<title>Onload Example</title>

function handleLoad() {

alert(window.onload);

}

</script>

</body>

</html>

287

All about Events

12_579088 ch09.qxd 3/28/05 11:39 AM Page 287