HTML / JavaScript Reference
Events
Overview
Most of the JavaScript you'll want to do will interact with HTML. The graphical layout
will be written in HTML and the programming logic will be written in JavaScript.
One of the most common ways to trigger JavaScript is through events.
Basic Rules
HTML form elements have a variety of events that they can use. For example,
a button can wait for a user to click on it, and then the
onClick event
will trigger. Just as attributes can go inside form tags, so do events.
You can determine what happens when the event is triggered by calling
a JavaScript function or writing the code within the tag.
Note. With the
exception of a short line of code, all events should call functions.
The following code is a good example of a short line of code written in the tag.
Basic Rules - example source
<FORM>
<INPUT TYPE="BUTTON" VALUE="Click for pop-up box" onClick="alert('onClick event');">
</FORM>
Basic Rules - example output
Common Events
onLoad
The
onLoad event is located in the
BODY tag,
and is triggered when the page first loads. All the form
elements have loaded by the time the
onLoad event is triggered
This means it is okay to call a function with
onLoad to change element properties.
onChange
The
onChange event is used by the
<SELECT> form element.
This means that when the user selects an option, we can assign some JavaScript
to occur.
<select name=CalcWhat onChange="changePics(document.Calc.CalcWhat.selectedIndex)">
<option value=0>Time
<option value=1>Distance
<option value=2 selected>Pace
</select>
onClick
One place the
onClick event can occur is in an input button.
<input type=button value="Calculate" onClick="calcIT()">
<input type=button value="Clear" onClick="clearNums()">