Handling Events with HTML Elements

See Also

You can specify how HTML elements on a page behave by writing script that responds to events. For example, you can write client script that initializes variables when a document is loaded (the window object's onload event), when a user enters text into a text box (the text box's onchange event), or when a user clicks a button (the button's onclick event).

Note   The easiest way to add objects to your application and write script for them is to use Microsoft^® Visual InterDev™ design-time controls. For details, see Creating Forms with Design-Time Controls and Writing Script for Script Objects.

You write event handlers as procedures (functions or subroutines) that appear in <SCRIPT> blocks in your page. To specify that the procedure is a handler for a specific event, you can:

• Create an implicit handler by naming the procedure after the event that it is a handler for.
  
  
• Explicitly relate the procedure to the event using object or script attributes.

If you are using Microsoft^® Visual Basic^®, Scripting Edition, you can create the procedure as either a subroutine or function. You would use a function if you want to return or set a value for the procedure, which you do in some instances to cancel the effect of the event.

Creating Implicit Handlers

An implicit handler uses a naming convention to link the handler to the object and event.

To create an implicit handler

1. In the Script Outline window, expand the node containing the object you want to script.

   Note   Objects appear in the Script Outline window only if their ID or NAME attribute is set. Objects inside a form appear only if the form's ID or NAME attribute is set.

2. Expand the name of the object.
   
   
3. Double-click the name of the event you want to write a handler for.

   The editor creates a skeleton handler for you in this format:

   function objectName_event
   

   For example, if your page contains a form that has a button called btnNext, the handler will be created with the name btnNext_onclick. If you create a JavaScript handler, the editor also adds an event attribute to the control you are scripting. For details, see "Using Attributes to Create Handlers" below.

   Handlers are created in one of the following <SCRIPT> blocks, depending on whether you are creating handlers for client or server objects, and what the default language is for the object:

   • clientEventHandlersJS
     
     
   • clientEventHandlersVBS
     
     
   • serverEventHandlersJS
     
     
   • serverEventHandlersVBS

   For details about setting a default language for generated script, see Choosing a Scripting Language.

After the skeleton has been created, you can fill it in. For example, the following client script function for a text box named txtName is called when the user tabs to or clicks it.

Function txtName_onblur()
   If frmMyForm.txtName.value = "" then
      alert("Name is required!")
   End if
End Function

If you are scripting in VBScript, you can cancel the effect of some events. For example, you can write a handler for a form's onsubmit event, which occurs when the user clicks the Submit button. Your script can check that the data is valid, and if it is not, cancel the onsubmit event. For details about whether you can cancel an event, see the documentation for the event you are working with.

To cancel the effect of an event

• Create the VBScript procedure as a function, and set the function's return value to False, as shown in the following script:

  <SCRIPT LANGUAGE="VBSCRIPT">
  Function frmMyForm_onsubmit()
     If frmMyForm.txtName.Value = "" then
        alert("You must enter a name.")
        frmMyForm_onsubmit = false
     End if
  End function
  </SCRIPT>
  

Using Attributes to Create Handlers

Another way to link a procedure to an event is to set attributes of the object or of the script that explicitly link the two.

Setting Object Attributes

When you create an object, you can set an attribute to assign a handler to it.

To use attributes to assign a handler to an event

• In the tag that creates the object, name the event and assign the procedure to it, using this syntax:

  <INPUT TYPE="ObjectType" LANGUAGE="language" EventName="Procedure">
  

  –or–

  <FORM LANGUAGE="language" NAME="FormName" EventName="Procedure">
  

The language attribute is not required, but guarantees that the handler will work the way you want. If no language is specified, the default language for the page is assumed.

For example, the following page contains a form with two buttons. Each button definition explicitly links the onclick event to a procedure:

<FORM NAME="Form1">
   <INPUT TYPE="button" NAME="btnVB" VALUE="VB" onClick="pressed" 
      LANGUAGE="VBScript">
   <INPUT TYPE="button" NAME="btnJS" VALUE="JS" onClick="pressed2()" 
      LANGUAGE="JavaScript">
</FORM>

<SCRIPT LANGUAGE="VBSCRIPT">
Sub Pressed()
   alert("Pressed the VBScript button")
End Sub
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript">
   function pressed2(){
      alert("Pressed the JavaScript button.");
   }
</SCRIPT>

In client script, for an object such as the window object, which is not explicitly created using a tag, use the <BODY> tag, as shown in the following example:

<HTML>
<HEAD>
<SCRIPT LANGUAGE="VBScript">
Sub newWindow
   'script statements here
End Sub
</SCRIPT>
</HEAD>

<BODY LANGUAGE="VBScript" onLoad="newWindow">
   [...]
</BODY>
</HTML>

Setting Script Attributes

Another way to link objects and handlers is to set attributes of the script that assigns it to an event.

To use script attributes to assign it to an event

• In the <SCRIPT> tag, use the FOR attribute to identify the object and the EVENT attribute to identify the event, using this syntax:

  <SCRIPT LANGUAGE="language" FOR="object" EVENT="EventName">
  

You can use this method for any named elements and for any elements inserted using the <OBJECT> tag. You do not need to create the script as a subroutine or function, because the script attributes specify when the script will run.

The following example is similar to the previous script example, but it uses a different syntax:

<SCRIPT LANGUAGE="VBScript" FOR="Button1" EVENT="onclick">
   alert("Button has been pressed")
   document.Form1.Button1.value="Pressed"
</SCRIPT>

<FORM NAME="Form1">
   <INPUT TYPE="button" NAME="Button1" VALUE="Click">
</FORM>