The JavaScript Diaries: Part 9/Page 2

The JavaScript Diaries: Part 9

onUnload

This event handler is used to execute a script before the page in the browser is exited. This usually happens when a visitor attempts to leave the current page. It should be used with extreme caution as it will generally annoy and frustrate your visitors. It's executed in the same manner as the onLoad event handler. An example would be:

<body onUnload="alert('You're leaving so soon?)"

onFocus

This event handler executes whenever a window or form element is selected by the visitor by clicking on the item, using the keyboard, or through manipulation by a script. An example is shown below:

<form>
  Credit Card Number:
  <input type="text" onFocus="alert('Don\'t use spaces or dashes');">
</form>

In this example, clicking in the input box above will bring up an alert window with the reminder, "Don't use spaces or dashes." This is a simple script. There are other uses we'll explore in later sessions.

onBlur

This event handler is executed whenever the window or form element loses the focus. It's the opposite of the onFocus event handler. It can be used like this:

<form>
  Credit Card Number:
  <input type="text" onBlur="alert('Thanks!');">
</form>

When the user moves the focus from the input box (by tabbing to another box, pressing the enter key, or moving the mouse), an alert box will appear with the message "Thanks!"

onError

This event handler is executed whenever an error is encountered. It's used to provide an alternative response when an error happens. If used, it should be placed toward the beginning of the script so it's available when the script is executed. An example would be:

window.onError = errpage;
function errpage() {
  window.location.href="errpage.html"
}

The first line calls the function errpage if an error is encountered. The errpage function uses the location object to redirect the browser to another page. The statement says the URL ("href") of the location of the current window should be changed to "errpage.html." If an error is encountered in the script, the browser will be redirected to the page named "errpage.html."

onResize

This event handler is executed when the browser window is resized. An example would be to place this script in the head of the document:

function alert_me(){
  alert("You resized me! Now my outer width is: "
    +this.outerWidth+" and my outer height is: "+this.outerHeight);
  this.focus();
}

then place this in the body of the document:

<form>
  <input type="button" value="Resize window" onClick="window.resizeTo(800,600); alert_me()" />
</form>

(Here we have two events called by using one event handler. Make sure that each of the statements is separated by a semicolon. You can have has many functions and statements as you want as long as each is separated by a semicolon.)

When the button is clicked, it calls the onClick event handler. First, the current window is resized to 800 pixels wide by 600 pixels high. (We looked at that method in the previous section.) Then the alert_me function is called, which pops up an alert window giving the new window size. Here's how the function actually works:

The function sets up an alert window. The two properties return the width and height of the newly resized window. The properties are read in this manner:
- The this property refers to the current window.
- The first one states, "this window has an outerWidth of"
- The next one states, "this window has an outerHeight of"
- The outerWidth and outerHeight refer to the size of the browser, including all of the chrome (address bar, scroll bars, etc.)
Finally, the focus is placed on the current window: focus on this window.

Another, simpler example is a script called "Reload on Resize" from the JavaScript Source. It's placed in the body tag:

<body onResize="window.location.href = window.location.href;">

Basically, this script does just what it says. When the browser window is resized, the page is reloaded. The window object statement window.location.href states that the current URL of the location of the window is equal to itself. Combined with the onResize event handler, it causes the browser to go to the stated URL when it's resized, which in this case causes the page to be reloaded. If you listed an actual URL in the second part of the equation, it would load that Web page. For example, the following code:

<body onResize="window.location.href = 'https://www.webreference.com/';">

would cause the page to load the index page for the Web Reference Web site when the browser window is resized. (This is not a good usage of the onResize event handler but it does demonstrate what the window object statement window.location.href can do. More on that in our next installment.)

[previous] [next]

Created: September 16, 2005

URL:

The JavaScript Diaries: Part 9/Page 2