Working with Events | Real World XML (2nd Edition)

One important aspect of JavaScript is interacting with the user , and you do that through events. As discussed earlier, when the user takes some action, such as clicking a button, dragging the mouse, or typing keys, an event happens. In the next chapter, we'll handle not only ordinary events such as button clicks, but also the events that occur as an XML document is loaded into the browser and parsed.

Events are handled tag by tag in browsers, and you use special event attributes to connect code, such as JavaScript code, to an event. For example, when the user presses the mouse button in a Web page, the code connected to the <BODY> element with that element's onMouseDown attribute is executed. You can see the complete list of events for various HTML tags in Table 6-1 for Internet Explorer and Table 6-2 for the Netscape Navigator.

Let's put this technology to work. In this case, I'll use events with two HTML controls (which are what you call the buttons, text fields, lists, and so on in HTML pages): buttons and text fields. When the user clicks the button, the JavaScript code in the page will display the message Welcome to event handling . in the text field.

You create both button and text field controls with the HTML <INPUT> element, setting this element's TYPE attribute to "text" to create a text field and to "button" to create a button. You can also give the button a caption with this element's VALUE attribute, give the text field a length (in characters ) with the LENGTH attribute, and supply a name with the NAME attribute. When you give a control a name, you can refer to it in code.

You must create controls inside an HTML form to use them, and you create an HTML form with the <FORM> element. (A form is just a programming construct. It does not appear in the Web page. When you click a Submit button, if there is one, all the data from the controls in a form is sent back to the Web server.) Here's how I add a button and a text field to an HTML page:

 <HTML>      <HEAD>         <TITLE>             Working With Events in JavaScript         </TITLE>     </HEAD>     <BODY>         <CENTER>  <FORM name = "form1">   <H1>   Working With Events in JavaScript   </H1>   <BR>   <H2>   Click the button!   </H2>   <BR>   <INPUT TYPE = "text" NAME = "Text" SIZE = "60">   <BR>   <BR>   <INPUT TYPE="button" VALUE="Click Here">   </FORM>  </CENTER>     </BODY> </HTML>

The next step is to connect the button to some JavaScript code so that when the button is clicked, a JavaScript function named displayMessage is called. In that function, I'll add the code we need to display the message Welcome to event handling . in the text field. To connect the displayMessage function to the button, I set the button's onClick event attribute to the JavaScript I want executed when the button is clicked "displayMessage()" , which will call the displayMessage function:

 <HTML>      <HEAD>         <TITLE>             Working With Events in JavaScript         </TITLE>     </HEAD>     <BODY>         <CENTER>             <FORM name = "form1">                 <H1>                     Working With Events in JavaScript                 </H1>                 <BR>                 <H2>                     Click the button!                 </H2>                 <BR>                 <INPUT TYPE = "text" NAME = "Text" SIZE = "60">                 <BR>                 <BR>  <INPUT TYPE="button" VALUE="Click Here"   onClick="displayMessage()">   </FORM>  </CENTER>     </BODY> </HTML>

All that we need to do now is create the JavaScript function named displayMessage that places the message Welcome to event handling . in the text field. So how do you actually access the text in a text field? All the items in a Web page can be accessed as subobjects of the document object. In particular, I've given the text field the name Text by setting the <INPUT> element's NAME attribute to "Text" . It's in the <FORM> element, which I've given the name form1 . This means that you can refer to the text field object as document.form1.Text . The actual text in the text field object appears in its value property, so you can refer to that text as document.form1.Text.value , like this:

Listing ch06_14.html

 <HTML>     <HEAD>         <TITLE>             Working With Events in JavaScript         </TITLE>         <SCRIPT LANGUAGE= "JavaScript">  function displayMessage(e)   {   document.form1.Text.value = "Welcome to event handling."   }  </SCRIPT>     </HEAD>     <BODY>         <CENTER>             <FORM name = "form1">                 <H1>                     Working With Events in JavaScript                 </H1>                 <BR>                 <H2>                     Click the button!                 </H2>                 <BR>                 <INPUT TYPE = "text" NAME = "Text" SIZE = "60">                 <BR>                 <BR>                 <INPUT TYPE="button" VALUE="Click Here"                     onClick="displayMessage()">             </FORM>         </CENTER>     </BODY> </HTML>

That's all it takes. Now when the user clicks the button, the message is displayed in the text field, as you can see in Figure 6-14.

Figure 6-14. Using a button and a text field in Internet Explorer.

graphics/06fig14.gif