Return to Course Content Home

JavaScript Events

Events

JavaScript has support for some events that occur in an HTML page. The number of events is not nearly as large as Swing supports, but it does cover many of the expected events that a browser sees. These include:

As with the onerror event, these events handled by typically first defining a function, and then setting the function name to the appropriate event name. It should be noted that you don't necessarily need to define a function, and even more interesting, you can put multiple commands or lines of JavaScript statements separated by semicolons. For Example, on a mouseOver event, you could have:

<a href="/https/web7.jhuep.com" onMouseOver="window.alert('What a cool link');document.bgColor='#0000AA'">

This will first pop up an Alert popup, then change the background color of the document to blue.

These events are generated whenever a page is loaded/unloaded from the browser. Event listeners for these events are typically tasked with pre-loading images used in buttons within the web page, checking the type of browser or processing cookies.

The onload/onUnload tags can be used with the following HTML tags <body>, <frame>, <frameset>, <img>, <link>, <iframe>, and <script>. They can also be tied to image, layer, and window JavaScript objects.

These events are tied to an input field, and are specified when you define the input field, such as

<input type="text" size="20" id="name" onChange="toUpper()" >

The events are generated under the following conditions:

Event
When generated
onFocus Whenever the focus enters the component. This occurs when you click in the component or you press TAB and the focus goes to the component
onChange Whenever the content is changed in the component.
onBlur Whenever the focus leaves the component. This occurs when you click in a different component or press TAB to have the focus go to another component

The onFocus, onChange and onBlur events can be used with the following HTML tags <a>, <acronym>, <address>, <area>, <b>, <big>, <blockquote>, <button>, <caption>, <cite>, <dd>, <del>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <frame>, <frameset>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <label>, <legend>, <li>, <object>, <ol>, <p>, <pre>, <q>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <th>, <thead>, <tr>, <tt>, <ul>, and <var>

You can use them on button, checkbox, fileUpload, layer, frame, password, radio, reset, select, submit, text, textarea and window JavaScript objects.

This event is generated whenever you SUBMIT a FORM (we'll cover this later). It is often used to validate data in FORMs prior to submission of the FORM to the server. The event is registered when you define the form itself. When you bind a function to the onSubmit() event, you usually bind a boolean return value instead, such as

<form method="post" action="formTarget.html" onSubmit="return validateForm()">

If validateForm() from above returns true, then the form is submitted to the target specified by the action attribute. If the function specified in the onSubmit attribute returns false, then the form is not submitted.

onSubmit is only used with form JavaScript objects.

These events are generated whenever the cursor passes over a component that was created with the onMouseOver or onMouseOut event defined. Most often, these components are buttons, but they may be hyperlinks or any other component.

<img src="image.gif" onMouseOver="alert('Isn't this a great image?')" />

The onMouseOver and onMouseOut events can be used with the following HTML tags <a>, <acronym>, <address>, <area>, <b>, <big>, <blockquote>, <button>, <caption>, <cite>, <dd>, <del>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <frame>, <frameset>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <label>, <legend>, <li>, <object>, <ol>, <p>, <pre>, <q>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <th>, <thead>, <tr>, <tt>, <ul>, and <var>.

You can also use them on layer and link JavaScript Objects.

We haven't yet covered the DOM model, but since this is such a common JavaScript use, here is how you swap out images when the mouse passes over something.

<img src="../Images/duke_nowave.gif" 
     name="image1" 
     border=0 
     onMouseOver="if (document.images) document.images.image1.src='../Images/duke_wave.gif'"
     onMouseOut="if (document.images) document.images.image1.src='../Images/duke_nowave.gif'">

First, note the use of the name tag. This lets us refer to this image within the document by its name. We specify that on a mouse over, that the image src be set to duke_wave.gif, and that when the mouse leaves the image, the old image is restored.

Below is the result of the JavaScript above. Mouse over Duke and watch what happens...



The onClick/onDoubleClick event is generated when a component is clicked on with the mouse.

The onClick and onDoubleClick events can be used with the following HTML tags <a>, <address>, <area>, <b>, <body>, <big>, <blockquote>, <button>, <caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <frame>, <frameset>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <label>, <legend>, <li>, <object>, <ol>, <p>, <pre>, <q>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <th>, <thead>, <tr>, <tt>, <ul>, and <var>.

You can also use them on layer and link JavaScript Objects.

This event is generated whenever a window (or Frame) is resized.

This event can be registered on the following HTML tags: <a>, <address>, <b>, <big>, <blockquote>, <body>, <button>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <frame>, <h1>, <h2>, <h2>, <h3>, <h5>, <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>, <li>, <object>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <textarea>, <tt>, <ul>, <var>

It can also be used with window JavaScript objects.

There are other less commonly used listeners, (onAbort, onError, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseMove, onMouseUp onReset, onSelect).