Firing Your Own Events


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.)

start sidebar
Custom Events in Visual Basic .NET

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.

end sidebar

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

start example
 <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> 
end example

click to expand
Figure 8-10: The custom onSame event is fired when the two text strings entered by the user are the same.




Learn How to Program Using Any Web Browser
Learn How to Program Using Any Web Browser
ISBN: 1590591135
EAN: 2147483647
Year: 2006
Pages: 115
Authors: Harold Davis

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net