Học JavaScript qua ví dụ part 56 ppsx

ptg 508 Chapter 13 • Handling Events 13.7.5 Mouse Positions We devoted a whole section of this chapter to handling mouse event handlers and what happens if the mouse rolls over a link or an image. In this section we discuss how to find out what event the mouse triggered and where the mouse was positioned when it fired. For browser compatibility tables see http://www.quirksmode.org/dom/w3c_cssom.html. Mouse Position. The client X and clientY properties (Internet Explorer) and pageX and pageY properties (Firefox) are used to get the coordinate positions of the mouse pointer in the document when the event is triggered. If you want to get the coordinate positions of the mouse within an element, then you would use the offsetX and offsetY properties (Internet Explorer) and nonstandard layerX and layerY (Firefox). Figure 13.35 Firefox—The mouse was clicked in the textbox but captured first in the form. Figure 13.36 Firefox—A key was pressed in the textbox. From the Library of WoweBook.Com ptg 13.7 The event Object 509 EXAMPLE 13.23 <html> <head><title>Mouse Coordinates</title> <script type="text/javascript"> function getCoords(e) { 1 var x = 0; // x and y positions var y = 0; 2 if (!e) var e = window.event; // Internet Explorer 3 if (e.pageX || e.pageY){ // Firefox x = e.pageX; y = e.pageY; } 4 else if (e.clientX || e.clientY){ 5 x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; y= e.clientY + document.body.scrollTop + document.documentElement.scrollTop; } // x and y contain the mouse position // relative to the document alert(x +", "+ y); } </script> <head> <body> <div style="background-color:aqua;position:absolute;top:50px" onMouseover="return getCoords(event);"> <h1>Mouse positions are relative to the document, not the <div> container</h1> </div> </body> </html> EXPLANATION 1 Variables x and y are declared. They will hold the pixel coordinates of the mouse. 2 If using Mozilla/Firefox, the value of e will be sent to the function; if using Inter- net Explorer, the value of window.event will be assigned to e. In this way both browsers will get a reference to the event triggered when the mouse event is fired. 3 The pageX,pageY pair represents the coordinates of a page regardless of scrollbars, but this pair is not supported by Internet Explorer. See an excellent demo at http://www.java2s.com/Code/JavaScriptDemo/EventpageYandpageX.htm. 4 The clientX,clientY pair represents the coordinates of a page and accounts for scrollbars. 5 The clientX and clientY pair return the position of the mouse pointer in the document, whereas offsetX and offsetY return the position of the mouse pointer on the element (see Figure 13.37). From the Library of WoweBook.Com ptg 510 Chapter 13 • Handling Events Mouse Buttons. Here we go again with more incompatibilities among browsers! And the mouse might only have one button, such as the Mac’s mouse, or two buttons and a wheel, or maybe the mouse button properties don’t work for all of the buttons. You will have to work with these properties for the particular browser you are using or make adjustments to your program to allow for multiple conditions; for example: if( browser == "Opera" ) { do this; } else if ( browser == "IE") { do that; } . In Example 13.24 the mouse used was a Microsoft mouse and then a Targus mouse with a left and right button and wheel in the middle. The browsers used were Firefox and Internet Explorer. Firefox returned a 3 for the right click and a 1 for the left click. Inter-net Explorer was consistent with Table 13.10. Could it be that running a virtual window OS on a Mac could make the difference? This is where the confusion really sets in! The only option is to test all possible button values in your script. The which (Firefox) and the button (Internet Explorer) properties are used to find out which mouse button was clicked: the left button, the middle button, or the right button. Figure 13.37 Mouse was positioned on the left top corner of the div box, 11 px from left, 50 px from top. From the Library of WoweBook.Com ptg 13.7 The event Object 511 Table 13.10 Button Values Microsoft Internet Explorer W3C/Mozilla/Firefox event.button event.which Left button = 1 Left button = 0 Middle button = 4 Middle button = 1 Right button = 2 Right button = 2 EXAMPLE 13.24 <html> <head><title>Mouse Buttons</title> <script> function whichButton(e) { var button; 1 if (!e) {var e = window.event;} 2 if(e.which){ button = e.which;} 3 else if(e.button){ button=e.button; } alert(button); 4 switch(button){ case 0: return("FF leftclick"); break; case 1: return("leftclick"); case 2: case 3: // Firefox returned 3 on the Mac return("rightclick"); break; case 4: return("IE middleclick"); } } </script> </head> <body>   Click the mouse in the green box <div onMousedown="alert(whichButton(event));" style="position:absolute;top:100;left:20; height:200;width:200;background-color:green"> </div> </body> </html> From the Library of WoweBook.Com ptg 512 Chapter 13 • Handling Events EXPLANATION 1 Unless the browser is Microsoft Internet Explorer, a reference to the event object is passed as a parameter called e. Internet Explorer uses the event property of the window object to get the value of e. 2 If not Internet Explorer, the which property contains a value representing the mouse button. 3 If Internet Explorer, the button property contains that value. 4 The switch statement is used to determine which button was clicked. See Figures 13.38 and 13.39. Figure 13.38 The left mouse button was clicked in the green box (Internet Explorer). The value was 1. Figure 13.39 The right mouse button was clicked in the green box (Internet Explorer). The value was 2. From the Library of WoweBook.Com ptg 13.7 The event Object 513 13.7.6 Key Events The Handlers. As of JavaScript 1.2, keyboard actions, not just mouse actions, can be detected in JavaScript programs. Now that we have discussed the event object, we will look at how to detect keyboard actions. This is useful, for example, in creating widgets or certain types of game programs where keyboard entry must be detected to determine the next action. The onKeyPress, onKeyDown, and onKeyUp event handlers are triggered when the user presses a key and releases it. The onKeyPress event is a combination of two actions: After you press down on the key, the event happens just at the point you release it. The other two key events happen as soon as you press a key down (onKey- Down) and then when you release it (onKeyUp). The onKeyDown and onKeyPress events keep firing continuously as long as the user keeps a key depressed, whereas the onKeyUp event fires once when the user releases the key. Detecting a user’s keystrokes might give you problems as all browsers are not compatible in how they handle the keys and the event properties. Properties for the key Event. The two main properties for the key event are key- Code and charCode. The keyCode property describes the actual key that was pressed, for example, the B key. The charCode property provides the ASCII value for that key. If it is a lowercase b, it will return 98 and if it is an uppercase B, it will return 66. The problem is that Windows Internet Explorer and Opera do not support charCode, but they do support keyCode when the onKeyPress event is triggered. For tables showing which browsers support these properties and a selection of other tables dealing with punctuation keys, special keys, and so on, see http://www.quirksmode.org/js/keys.html. Browser Incompatibilities. Figures 13.40 and 13.41 were taken from a site where a test can be run from your browser by performing keystrokes. The output shows what properties are supported for keydown, keypress, keyup, and so on. Go to http://unixpapa.com/js/testkey.html to run the test. Go to http://www.JavaScriptkit.com/jsref/eventkeyboardmouse.shtml for an excellent reference with examples. From the Library of WoweBook.Com ptg 514 Chapter 13 • Handling Events Figure 13.40 Checking Opera key events at http://unixpapa.com/js/testkey.html. Figure 13.41 Checking Firefox key events. From the Library of WoweBook.Com ptg 13.7 The event Object 515 EXAMPLE 13.25 <html> <head><title>keypress event</title> 1 <script type="text/javascript" src="browser_info.js"></script> </head> 2 <body onKeyPress=" 3 if(browserName =='Firefox'){ 4 alert('The key pressed:'+ event.which + 5 ' ASCII= '+ String.fromCharCode(event.which)); } 6 else if(browserName == 'Microsoft Internet Explorer' || browserName=='Opera'){ alert('The key pressed:'+ event.keyCode + ' ASCII='+ String.fromCharCode(event.keyCode)); } "> <font face = "verdana"> <b>Press any key on your keyboard and see what happens!</b> </font> </body> </html> EXPLANATION 1 An external file is loaded here. It contains the code to determine what browser is being used. See http://www.JavaScripter.net/faq/browsern.htm for source code. 2 The body tag is assigned an onKeyPress event handler. If the user presses a key anywhere in the body of the document, the event is triggered, causing an alert method to appear and display the value of the key. 3 First we check to see if the browser being used is Firefox. Firefox and Internet Ex- plorer use different properties to describe the numeric value of the key being pressed. 4 The which property of the event object describes the numeric ASCII value for the key that was pressed. (See more of the event object on page 499.) 5 The String method fromCharCode() converts the ASCII value of the key to the character value that is shown on the key (e.g., ASCII 65 is character “A”). 6 If the browser isn’t Firefox, the alternative for this example is Internet Explorer or Opera. They use the keyCode property to represent the numeric value of the key being pressed. The fromCharCode() String method converts the number to a character. The output is displayed for both browsers in Figures 13.42 and 13.43. From the Library of WoweBook.Com ptg 516 Chapter 13 • Handling Events Figure 13.42 The ‘a’ key was pressed (Firefox). Figure 13.43 Internet Explorer and the onKeyPress event (Shift+a). From the Library of WoweBook.Com ptg 13.8 The Scripting Model for Handling Events 517 13.8 The Scripting Model for Handling Events We have been using event handlers like onClick, onSubmit, and onMouseOver, through- out this text. So far, this chapter has described in detail all of the different event handlers and how to use them as inline HTML attributes. Inline event handling is the oldest and simplest way to handle events and is browser compatible. The following example uses the onClick handler as an attribute of the button element. When the user clicks the button, the function movePosition() will be called. <input type="button" value="move text" onClick="movePosition()"/> But using this type of handler violates the principle of separation of the layers; that is, the separation of markup/presentation from behavior/ JavaScript. To solve this problem, we can handle events within the JavaScript code itself. All of the HTML attributes used as event handlers can also be used as DOM properties. These properties can be used in JavaScript to simulate the event that they are named for. If, for example, you want to trigger a window event, JavaScript views the window as an object and any event associ- ated with it as a property. If you want to use the onload event with the window object, you would say window.onload. The main difference is that unlike using HTML attributes, which take a string value, a function reference is assigned to an event handler. All Java- Script event properties must be in lowercase, such as window.onload or window.ununload. (The event handlers, used as HTML attributes, are not case sensitive, so ONUNLOAD, onUnLoad, and onunload are all acceptable.) Here’s an example: window.unload=some_function; 13.8.1 Getting a Reference to the Object To assign an event property to an object, JavaScript will need a reference to the object. For example, if the click event is to be triggered when the user clicks a button, then Java- Script will need to use a reference to the button. By assigning an id to the HTML button, JavaScript can use the DOM’s getElementById() method to get the reference it needs. In the HTML part of the document: input type button id=”button1”> In the JavaScript script: var b1=document.getElementById("button1"); Now b1 in the script is a reference to “button1” from the HTML document. After JavaScript has a reference to the HTML element, the name of the event, such as click or onmouseover can be used as a property: b1.click b1.mouseover From the Library of WoweBook.Com . the HTML button, JavaScript can use the DOM’s getElementById() method to get the reference it needs. In the HTML part of the document: input type button id=”button1”> In the JavaScript script: var. that is, the separation of markup/presentation from behavior/ JavaScript. To solve this problem, we can handle events within the JavaScript code itself. All of the HTML attributes used as event. properties. These properties can be used in JavaScript to simulate the event that they are named for. If, for example, you want to trigger a window event, JavaScript views the window as an object