Handling Mouse Events | Real World XML (2nd Edition)

I'll close this chapter with a reasonably full-scale example that uses the mouse. You can use it in either the Netscape Navigator or Internet Explorer (even though event handling works differently in those two browsers). I determine what browser the user has by checking the appName property of the navigator object; the two possible values of navigator.appName are "Microsoft Internet Explorer" or "Netscape" in these two browsers.

Here are the JavaScript events that this program will use:

onMouseDown Happens when a mouse button goes down in the page
onMouseUp Happens when a mouse button goes up in the page

When you press or release the mouse button in this page, the code reports the location of the mouse. To find the (x, y) location of the mouse, you use the window.event.x and window.event.y properties in Internet Explorer; you use the e.pageX and e.pageY properties, in which e is the name I've given the event object passed to the mouse event-handler function in the Netscape Navigator.

There's one more point I should mention. In Internet Explorer, you connect the mouseDown and mouseUp events to the <BODY> element this way:

 <BODY onMouseDown = "mouseDownHandler()" onMouseUp = "mouseUpHandler()">

But in Netscape Navigator, the <BODY> element does not support the onMouseDown and onMouseUp event attributes. In Netscape Navigator, you connect mouse event handlers using the document.onMouseDown and document.onMouseUp properties in the <SCRIPT> element, like this:

 <SCRIPT LANGUAGE= "JavaScript">  document.onMouseDown = mouseDownHandler   document.onMouseUp = mouseUpHandler  .    .    .

Here's what the full code looks like for this example:

Listing ch06_15.html

 <HTML>     <HEAD>         <TITLE>             Using JavaScript and the Mouse         </TITLE>         <SCRIPT LANGUAGE= "JavaScript">             document.onMouseDown = mouseDownHandler             document.onMouseUp = mouseUpHandler             function mouseDownHandler(e)             {                 if (navigator.appName == "Microsoft Internet Explorer") {                     document.form1.Text.value = "Mouse button down at: " +                     window.event.x + ", " + window.event.y                 }                 if(navigator.appName == "Netscape" &&                     parseInt(navigator.appVersion) == 4) {                     document.form1.Text.value = "Mouse button down at: "                     + e.pageX + ", " + e.pageY                 }                 if(navigator.appName == "Netscape" &&                     parseInt(navigator.appVersion) > 4) {                     document.form1.Text.value = "Mouse button down at: "                     + e.clientX + ", " + e.clientY                 }             }             function mouseUpHandler(e)             {                 if (navigator.appName == "Microsoft Internet Explorer") {                     document.form1.Text.value = "Mouse button up at: " +                     window.event.x + ", " + window.event.y                 }                 if(navigator.appName == "Netscape" &&                     parseInt(navigator.appVersion) == 4) {                    document.form1.Text.value = "Mouse button up at: "                    + e.pageX + ", " + e.pageY                 }                 if(navigator.appName == "Netscape" &&                     parseInt(navigator.appVersion) > 4) {                     document.form1.Text.value = "Mouse button up at: "                     + e.clientX + ", " + e.clientY                 }             }         </SCRIPT>     </HEAD>     <BODY onMouseDown = "mouseDownHandler(event)" onMouseUp =         "mouseUpHandler(event)">         <CENTER>             <FORM name = "form1">             <H1>                 Using JavaScript and the Mouse             </H1>             <BR>             Click the mouse.             <BR>             <BR>             <BR>             <INPUT TYPE = "text" name = "Text" SIZE = 60>             </FORM>         </CENTER>     </BODY> </HTML>

You can see this example at work in Figure 6-15. If you press or release the mouse button in the page, the JavaScript code lets you know what's going onand where it's going on, as you see in the figure.

Figure 6-15. Using the mouse in JavaScript.

graphics/06fig15.gif

That brings us up to speed in JavaScript. We're ready to put it to work in the next chapterusing a scripting language such as JavaScript is how you gain access to XML in a document in the browser. I'll turn to that now.