events

a definition
Events are pieces of code that are run when an action is taken by the user. For instance, the web page could contain an event that would be run when a button is clicked. When the user clicks the button, the code is run. Events enable the web site to interact with the user, and are the tie that binds the code to the web page.
Events look at first glance like a function. The following code section first creates a button using HTML, then handles the OnClick event with Javascript.

... HTML page begin ...
<input type="button" value="Hello!" OnClick="ButtonClicked();">

<script language="JavaScript">
<!--

function ButtonClicked()
{
 alert("Hello!");
}

// -->
</script>

OK... lets dissect the above segment line by line. The <input type="button"> creates a button, with a button caption of "Hello!", specified in the 'value' parameter. The OnClick parameter will trigger a line of VBScript or JavaScript when the button is clicked. "ButtonClicked();" is JavaScript code that executes the ButtonClicked() function, which is defined a few lines later, and simply brings up an alert box with "Hello!" when it is clicked. So, let's test it out! The following button was created with the code that is shown above; click it to see how the results are exactly what we anticipated.

VBScript is slightly different:

... HTML page begin ...
<input type="button" value="Hello!" language="VBScript" OnClick="VBButtonClicked()">

<script language="VBScript">
<!--

sub VBButtonClicked()
 MsgBox("Hello!")
End Sub

' -->
</script>

Note that if you use VBScript code in the OnClick event, you must set the <input> tag's language parameter to "VBScript" in order to be compatible with earlier versions of Internet Explorer. This is unnecessary for JavaScript code, because JavaScript is the default script interpreter. To test the VBScript code, click this button:

In-line events are usually one-line code strips that need to be executed when an event occurs. Instead of creating a function, we can type the code right into the button's OnClick paramater. This is demonstrated by the code below:

For JavaScript: <input type="button" value="Hello!" OnClick="alert('Hello!');">
For VBScript: <input type="button" value="Hello!" language="VBScript" OnClick="MsgBox('Hello!')">

vbscript code handling
In VBScript, there is one final option:

... HTML page begin ...
<input type="button" value="Hello!" name="HelloButton">

<script language="VBScript">
<!--

sub HelloButton_OnClick()
 MsgBox("Hello!")
End Sub

' -->
</script>

Instead of adding an OnClick argument to our button, we added a name argument, informing scripts how it should be identified. In VBScript only, you can handle any event by referencing it inside of a script using this syntax:
Sub name_event()
To test this method, click this button:
The output should be identical to the examples previously shown.

event list
Each web browser has it's own specific set of events that can be triggered. This section will include all the events that the most recent browsers can handle, as well as provide some backward-compatibility tips for designing with earlier browsers. Following is a comprehensive list of the available browser events. If noted, events support Internet Explorer version 3.0.

Events compatible with both Internet Explorer and Netscape Navigator (versions 4.0+):

OnClick This is the event that is implemented most often. It is supported in nearly all browsers. Internet Explorer 3.0 allows the OnClick argument to be added to <input type="button"> tags and <a> links.
OnBlur Also supported by almost all browsers, the OnBlur even occurs when an element loses focus, usually when the user deselects the element by pressing {tab}.
OnChange This event is triggered by a text box being changed, then the changes being registered by pressing {tab}. Internet Explorer 3 allows the OnChange argument to be added to <input type="text"> text boxes and <input type="textarea"> multiline text-entry fields. In Netscape and IE3, OnChange is activated only after the text box loses focus.
OnFocus This event occurs when the cursor focus is on the element.

Dynamic HTML events compatible only with Internet Explorer 4.0+:

OnMouseOver and OnMouseOut These events occur when the mouse enters and leaves an element. Test OnMouseOver and OnMouseOut
OnKeyDown and OnKeyUp These events are triggered by the user pressing down and releasing a key on the keyboard.
When a key is pressed, the text box colors will invert
OnMouseDown and OnMouseUp Dynamic HTML, in addition to handling OnClick, also supports OnMouseDown and OnMouseUp for more refined control. Click here to test OnMouseDown and OnMouseUp
OnKeyPress This event is triggered when a key is pressed.
OnMouseMove This event is triggered every time the mouse is moved over a pixel of an element. Test OnMouseMove
OnSelectStart This event is triggered when the user begins to select text in a specific element. Select any of this text to test OnSelectStart
OnDragStart This event is triggered when the user starts to drag a specific element. Drag Me
OnHelp This event is triggered when the user clicks on the element or link to select it, then presses {F1}. Click me, then press {F1}
OnDblClick Finally, OnDblClick is only triggered when the mouse is double clicked on an element. Note that the first click triggers an OnClick event, and the second click, if executed within a user-definable time limit, triggers OnDblClick. Test OnDblClick
OnSelect OnSelect code is executed when text in the element is selected. Internet Explorer 3 allows the OnSelect argument to be added to any <input> tag.

defining your own arguments
When you call the alert function in your script, you add a string argument that tells the function what you want displayed in the resulting message. When you create your own functions, you can require calling scripts to add arguments. For instance, in JavaScript, we can create a simple function that accepts and argument:

... HTML page begin ...
<script language="JavaScript">
<!--

function CallAlert(MyArgument)
{
 // Note the presence of "MyArgument" in the above function definition.
 // This creates a variable and stores in it the value that the calling function passed to us.
 alert(MyArgument);
}

function TestFunction()
{
 // This function will call CallAlert, defined above.
 CallAlert("This will be shown in an alert box");
 CallAlert("After the user clicks OK, this text will appear in another box");
}

// -->
</script>

<input type="button" value="Call TestFunction()" OnClick="TestFunction();">

<input type="button" value="Call CallAlert('Hello!')" OnClick="CallAlert('Hello!');">

OK... lets take a moment to digest this.
First, we create a function called CallAlert, which accepts an argument that is internally referenced by the name of 'MyArgument'. Our function is very, very simple; all it does is to call the alert function with whatever the calling function sends to it. Next, we create a function called TestFunction. TestFunction calls CallAlert twice, passing it a different string each time. CallAlert then calls alert twice, displaying the two messages that we pass to it.
Finally, we create two button so we can test our code. The first calls TestFunction, the second calls CallAlert directly. (Note the replacement of double quotes with single quotes when we call CallAlert from an in-line script.) Does our code work as we expected? Let's find out. Click these buttons to execute the code we just wrote:


Click here to go back to the table of contents.

Copyright © 1998 Webworks Team. All rights reserved. Email with questions or comments about this web site.