Javascript Events

What are events?

Events are signals generated when specific actions occur. scripts can be built to react to these events.

Events in Javascript include:

Event	Description
abort	Occurs when the user cancels loading of an image
blur	Occurs when input focus is removed from the form element (when the user clicks outside the field)
click	Occurs when user clicks on a form element or link
change	Occurs when the value of a form field is changed by the user
error	Occurs when an error happens during loading
focus	Occurs when input focus is given to a form element or window
load	Occurs when a page is loaded
mouseout	Occurs when the user moves the pointer off a link
mouseover	Occurs when the user moves the pointer over a hypertext link
reset	Occurs when the user clears a form using a button
select	Occurs when a user selects a form element's field

EVENT HANDLER

Instead of the <script> tag, an event handler is added as an attribute to an HTML tag. Basically you use an event handler to perform a script when some particular event occurs such as pressing a button or entering information in a field. Tags that support event handlers include <img>, <link>, and the form element tags.

EVENT HANDLER SAMPLE:

<a href="http://www.yahoo.com" onClick="alert('Going to Yahoo home page.');">Demo of Alert</a>

EVENT HANDLER SAMPLE2:

<form method="post">
<input type="button" value="back" onclick="history.go(-1); return true;">
</form>

This defines a button with an event handler. The event handler is an attribute of the <input> tag. The attribute name is the event name, which in this case is onclick. This is an event that occurs when the user clicks the mouse on an object.

Load and Unload

The load event is generated when a page has totally loaded. The unload event occurs when the user exits a page. The unload/load event handlers permit you to execute a program at these times. Each are used as an attribute of the <body> html tag.

Lets make a welcome message when the page is loaded and a goodbye message when they leave.

The code we will use is:

<body
onLoad="javascript:alert('Oh-my-gosh it works!')"
onUnload="javascript:alert('Drat')">
<p>Text of body would be here on a normal page...
</body>
</html>

We can personalize this script using the prompt() method as well

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demo of load and unload 2</title>
<script type="text/javascript">
var name="";
</script>
</head>

<body onLoad="
name=prompt ('Enter your name please:','Name');
alert ('Welcome ' + name );"
onUnload="alert('Farewell ' + name + ', sorry you are leaving');" bgcolor="#FFFFFF">

<p>Text of body would be here on a normal page...
</body>
</html>

Here the "prompt" method prompts the user to put in their name, which is then called in the "alert" box afterward.

OnChange

Now lets try "onchange" which cccurs when the value of a form field is changed by the user

Sample of onchange

<html>
<head>
<script type="text/javascript">
function upperCase(x)
{
var y=document.getElementById(x).value;
document.getElementById(x).value=y.toUpperCase();
}
</script>
</head>

<body>

Enter your name:
<input type="text" id="fname"
onchange="upperCase(this.id)">

</body>
</html>

[above from http://www.w3schools.com/jsref/jsref_onchange.asp]

Lets discuss it a bit. What happens is the "this.form" agrument call to the calculate() function. Additionally, the "onchange" event handlers for both the double and square fields have multi-line scripts for their event handlers. The semicolons separate the lines of the script, even though the script may appear on one physical line.

The onchange event handlers in both the double and square fields first calculate the value of the entry field and then call calculate() to calculate the values based on the value of the entry field.

Another sample of 'onchange'

Here is code for a menu makes use of the "onchange" event:

<form name="demo">
<select name=nav onChange="if (this.selectedIndex!=0)location=document.demo.nav.options[document.demo.nav.selectedIndex].value">
<option value="http://www.google.com" selected>Google </option>
<option value="http://www.yahoo.com">Yahoo</option>
<option value="http://www.altavista.com">AltaVista</option>
</select>
</form>

Now lets break it down a bit:

The above script uses the "select" tag to select an item from a list and navigate you to the site selected. When you choose something from the list you are "selecting" one of the options.

Of particular interest is where it says "onchange". This means that when the value of the field changes the script is to perform an action. The action we asked for is to open the page associated with the chosen select option as long as the selected option is not zero (no change) in the form named "demo" within the field named "nav". The keyword "this" tells the script that we are referring to the current field.

Another sample of 'onclick'

Here is a similar sample but this one makes use of onclick:

<form name="demo2">
<select name="nav2">
<option value="http://www.google.com" selected>Google </option>
<option value="http://www.yahoo.com">Yahoo</option>
<option value="http://www.altavista.com">AltaVista</option>
</select>
<input type="button" name="button1" value="GO"
onclick="document.location=document.demo2.nav2.options[document.demo2.nav2.selectedIndex].value">
</form>

Do you see the difference? Here we are using "onclick" instead of "onchange". With this command the user must tell Javascript that the value of the field has changed by hitting the button. The button tells Javascript to "Go" and recognize the change.

Notice also that we gave the form (demo2) and the field (nav2) new names. It is always advised to give all forms and fields their own names (particularly when you have more than one form area in a document) so as to not confuse Javascript.