This step-by-step article demonstrates how to use object events to handle user interaction with Web page elements. In this article, you create a sample that handles the
onPropertyChange event to take action when the user selects or clears a check box.
Dynamic Hypertext Markup Language (DHTML) provides an extensive object model for Hypertext Markup Language (HTML) and exposes all Web page elements as objects that can be scripted. You can manipulate DHTML objects to change style attributes or other properties for Web page elements with script. With DHTML, you can handle user interaction with Web page elements by means of object events.
Requirements
The following list outlines the recommended hardware, software, network infrastructure, and service packs that are required:
- Internet Explorer 5.5 or later
This article assumes that you are familiar with the following topics:
Detect the Property Change Event
- Open a text editor such as Notepad.
- Add the following code to the file:
<HTML>
<BODY>
<P/><INPUT Type="checkbox" CHECKED ID="Check1"/>
<P/><INPUT Type="text" ID="Text1"/>
</BODY>
<SCRIPT Language="VBScript">
Function Check1_OnPropertyChange()
Text1.Disabled = Not(Check1.Checked)
End Function
</SCRIPT>
</HTML>
- Save the file as C:\PropChangeDemo.htm.
Verify That It Works
- Start Internet Explorer.
- Type C:\PropChangeDemo.htm in the Address bar. The HTML page contains a check box and a text box. Notice that the check box is selected and that the text box is empty.
- Type any text in the text box to verify that the text box is enabled.
- Click to clear the check box. This fires the onPropertyChange event. The event handler method in the HTML page disables the text box.
- Try to type additonal text in the text box. Notice that you cannot type any text because the text box is disabled.
- Click to select the check box. This fires another onPropertyChange event. The event handler method enables the text box.
- Type additional text in the text box. Notice you can type text now because the text box is enabled again.