Unlike many modern development environments, the simple JavaScript environment we’ve been using, with completed applications running in a Web browser, doesn’t provide any way to register functions as events so that there can be an easy way to respond when they’ve been fired. (See the sidebar “ Custom Events in Visual Basic .NET ” to get a sense of how easy one modern language makes it to do this.)
Advanced | Even though there’s no formal mechanism in our simple development environment for registering, firing, and responding to events, we can still use the concept of the event as an organizational principle for programs. |
Let’s take a look at a simple example.
Let’s suppose we have an object, which I’ve named Thing. (For a review of objects, see Chapter 7, “ Working with Objects.”)
The Thing object has three properties (name, text1, and text2) and a toString method implementation. Here’s the constructor function and toString prototype function for the Thing object:
function Thing (name, text1, text2) { this.name = name; this.text1 = text1; this.text2 = text2; } Thing.prototype.toString = function () { return this.name; }
The idea is that if the text strings passed to the constructor of an instance of the Thing object are the same, an onSame event is fired. (In “real life,” you might want to do something by executing code if two things are the same.)
In Visual Basic .NET you can add an event function to a class by declaring it with the Event keyword. Within the class, the event is fired using the RaiseEvent keyword. For example:
Public Event onSame () ... RaiseEvent onSame
A program that interoperates with an instance of the class needs to add the keyword WithEvents to the statement that creates the class instance. For example:
Private WithEvents x As New Thing
Then the function or procedure that handles the event is labeled with a Handles clause that names the instance and the event function. For example:
... Private Sub x_onSame Handles x.onSame ...
That’s all there is to it. You’ll find similar scenarios for most modern programming languages.
Here is the method function that checks to see if the values passed to a Thing object instance are the same, along with the assignment of the function to the object prototype:
function check_Same() { if (this.text1 == this.text2) { this.onSame(); } } Thing.prototype.checkSame = check_Same;
The implementation code for the onSame method just displays an alert box saying the two string properties associated with the instance are the same:
function on_Same () { alert("The two values entered in " + this.toString() + " are the same!"); } Thing.prototype.onSame = on_Same;
To see how this works, we’ll need an HTML form that allows the user to enter a name for the instance of the Thing object and two text values. Here it is (with table tags omitted for clarity):
<FORM> Name your object:< input type=text name="txtName"> Enter first text: <input type=text name="txtFirst"> Enter second text: <input type=text name="txtSecond"> <input type=button value="Do It!" onClick="createThing (txtName.value, txtFirst.value, txtSecond.value);"> </FORM>
The Do It! button’s onClick event calls a function named createThing, passing to it the information entered by the user. Here’s the createThing function, which in turn invokes the object instance checkSame method:
function createThing (name, text1, text2) { var x = new Thing (name, text1, text2); x.checkSame(); }
Listing 8-5 shows the complete code in an HTML page. If you open it in a Web browser, you can try entering a name and two text strings in the text boxes and clicking the Do It! button. So long as the text strings aren’t the same, nothing will happen. But if you enter two text strings that are the same, the onSame event is fired and an alert box is displayed (see Figure 8-10).
Listing 8.5: Firing the onSame Event
<HTML> <HEAD> <TITLE>An event of my own!</TITLE> <SCRIPT> // Define a Thing object function Thing (name, text1, text2) { this.name = name; this.text1 = text1; this.text2 = text2; } Thing.prototype.toString = function () { return this.name; } function on_Same () { alert("The two values entered in " + this.toString() + " are the same!"); } function check_Same() { if (this.text1 == this.text2) { this.onSame(); } } Thing.prototype.checkSame = check_Same; Thing.prototype.onSame = on_Same; function createThing (name, text1, text2) { var x = new Thing (name, text1, text2); x.checkSame(); } </SCRIPT> </HEAD> <BODY> <TABLE> <FORM> <TR> <TD>Name your object:</TD> <TD> <input type=text name="txtName"> </TD> </TR> <TR> <TD>Enter first text:</TD> <TD> <input type=text name="txtFirst"> </TD> </TR> <TR> <TD>Enter second text:</TD> <TD> <input type=text name="txtSecond"> </TD> </TR> <TR> <TD> </TD> <TD> <input type=button value="Do It!" onClick="createThing (txtName.value, txtFirst.value, txtSecond.value);"> </TD> </TR> </FORM> </TABLE> </BODY> </HTML>
Figure 8-10: The custom onSame event is fired when the two text strings entered by the user are the same.