Chapter 14. Dynamic HTML: Event Model

Size: px

Start display at page:

Download "Chapter 14. Dynamic HTML: Event Model"

Lauren Robinson
6 years ago
Views:

1 Chapter 14. Dynamic HTML: Event Model DHTML s event model lets scripts respond to user actions. Event onclick The onclick event fires when the user clicks the mouse. The following causes the enclosed script to be executed when the element with id element_id is clicked. <script type = text/javascript for = element_id event = onclick > </script> We get inline scripting by including onclick = script in the opening tag of an element e.g., <p onclick = "alert( 'second' )">p2</p> 212

2 Example: <html> <head> <title>onclick Example</title> <script type = "text/javascript" for = "p1" event = "onclick"> alert( "first" ); </script> </head> <body> <p id = "p1">p1</p> <p onclick = "alert( 'second' )">p2</p> </body> </html> The rendering is: p1 p2 When p1 is clicked, an alert box appears with text first. When p2 is clicked, an alert box appears with text second. The alert boxes may be raised and dismissed any number of times. 213

3 The event Object, and Tracking the Mouse with Event onmouseover The event object contains information about the triggered event. Some of the properties of event are: type is the name of the event that fired. srcelement is a reference to the object that fired the event. This object has its usual properties e.g., event.srcelement.tagname propertyname is the name of the property that changed in this event. offsetx / offsety are the coordinates of the mouse cursor relative to the object that fired the event. x / y are the coordinates of the mouse cursor relative to the parent element of the element that fired the event. screenx / screeny are the coordinates of the mouse cursor on the screen coordinate system. clientx / clienty are the coordinates of the mouse cursor within the client area (the active area where the page is displayed). altkey is true if the ALT key was pressed when the event fired. Similar properties: ctrlkley and shiftkey. button gives the mouse button pressed: 1 (left), 2 (right), 3 (left and right), 4 (middle), 5 (left and middle), 6 (right and middle), or 7 (all three). See Figure 14.5, p. 464 in the text for more. 214

4 Event onmousemove fires constantly when the mouse is in motion. Example: <html> <head> <title>onmousemove example</title> <script type = "text/javascript"> function updatemousecoordinates() { coordinates.innertext = event.srcelement.tagname + " (" + event.offsetx + ", " + event.offsety + ")"; } </script> </head> <body onmousemove = "updatemousecoordinates()"> <span id = "coordinates">(0, 0)</span><br> <img src = "ellipse.bmp" style ="position: absolute; top: 100; left: 100"> </body> 215

5 When the mouse cursor is not over the image, the coordinates are in the body s coordinate system. When it s over the image, the coordinates are in the image s coordinate system. 216

6 Rollovers with onmouseover and onmouseout When the mouse cursor moves over an element, event onmouseover is fired for that element. When the mouse cursor leaves an element, event onmouseout is fired for that element. Handling these events, we can achieve a rollover effect: the text of an element changes as the mouse moves over and out of it. The document object has predefined event-handler slots for certain events. You can associate an event handler with an event by assigning its name to the corresponding slot: document.event_handler_slot = event_handler; Then, when the corresponding event happens, event_handler is invoked. The name event_handler_slot is usually the lowercase event name. Examples: document.onmouseover = moverhandler; document.onmouseout = mouthandler; Here moverhandler and mouthandler are event handlers for the events onmouseover and onmouseout written by the programmer. The following is needed for the next example. We can create a new image object and set its src property to the file containing the image with variable_name = new Image(); variable_name.src = file_name ; Creating an image object lets us pre-load the desired image rather than delaying download to when the image is displayed. 217

7 Example: Here we define in the body a 2 2 table (where we show the id s in parentheses): 1 (E0) 2 (E1) 3 (E2) 4 (E3) In the script, we initialize two array variables: ar1 = [ one, two, three, four ], ar2 = [ I, II, III, IV ] When the mouse cursor moves over the cell with id Ei, the numeral word ar1[ i ] appears in the cell. When the mouse cursor moves out of the cell, the Roman numeral ar2[ i ] appears in it. The name (a string) of the of the source element of the event is given by event.srcelement.id For this example, we use all but the first character of this as a subscript into either the ar1 or the ar2 array: ar1[ event.srcelement.id.substr( 1 ) ] Both event handlers first check whether the event was the image object (with id first ). If not, they check that the source element of the event has an id (that the id property is not undefined): if ( event.srcelement.id ) We must do this since both events (onmouseover and onmouseout) fire for any element, but we process these events only for certain elements (those with id s). 218

8 <html> <head> <title>rollover Example</title> <script type = "text/javascript"> var image1 = new Image(), image2 = new Image(), ar1 = [ "one", "two", "three", "four" ], ar2 = [ "I", "II", "III", "IV" ]; image1.src = "ellipse.bmp"; image2.src = "rectangle.bmp"; document.onmouseover = moverhandler; document.onmouseout = mouthandler; function moverhandler() { if ( event.srcelement.id == "first" ) event.srcelement.src = image2.src; else if (event.srcelement.id ) event.srcelement.innertext = ar1[ event.srcelement.id.substr(1) ]; } function mouthandler() { if ( event.srcelement.id == "first" ) event.srcelement.src = image1.src; else if (event.srcelement.id ) event.srcelement.innertext = ar2[ event.srcelement.id.substr(1) ]; } </script> </head> Continued next page 219

9 Continued from previous page <body> <img src = "ellipse.bmp" id = "first"> <table style = "width: 30%; text-align: center"> <caption>some Numbers</caption> <tr style = "text-align: center"> <td id = E0 style= "width: 15%">1</td> <td id = E1 style= "width: 15%">2</td> </tr> <tr style = "text-align: center"> <td id = E2 style= "width: 15%">3</td> <td id = E3 style= "width: 15%">4</td> </tr> </table> </body> </html> 220

10 When the mouse cursor enters the area with the image of the ellipse, the image of a rectangle appears. When the mouse cursor leaves the area with the image of the rectangle, the image of ellipse re-appears. These images keep swapping: when the mouse cursor is in the area, we have a square; when it s out, we have am ellipse. When the mouse cursor enters a cell with one of the numbers, say, 2, it is replaced with its number word, two. When the mouse cursor leaves this cell, the Roman number II appears. Two and II keep swapping: when the mouse cursor is in the cell, we have two; when it s out, we have II. But 2 never re-appears. 221

11 Error Handling with onerror Scripts can use the onerror event to execute specialized errorhandling code in place of the error dialog presented by browsers. Suppose we define a function errorhandler as the handler for the onerror event: document.onerror = errorhandler; The header of this function should have three arguments (the names are up to you): function errorhandler( errtype, errurl, errlinenum ) Here errtype (a string) is the type of the error, errurl (a string) is URL of the page where the error occurred, and errlinenum (an integer) is the number of the line where the error occurred. It returns true to indicate that it has handled the error. If it returns false, the default response (an error dialog) occurs. The following is needed for the next example. We can cause text to appear in the status bar at the bottom of the browser window by assigning it to window.status. 222

12 Example We define an error handler that writes to the status bar the type of error and the line and URL where it occurred. We force an error by associating a call to an undefined function with the onclick event of a paragraph element. <html> <head> <title>onerror event</title> <script type = "text/javascript"> document.onerror = errorhandler; function errorhandler( errtype, errurl, errlinenum ) { window.status = "Error: " + errtype + " on line " + errlinenum + " of " + errurl; return true; } </script> </head> <body> <p onclick = "dothis()">click here</p> </body> </html> 223

13 When the text Click here of the paragraph is clicked, we get: To make sure this example works, open the Control Panel and select Internet Options. Click the Advanced tab. Under Browsing, make sure the Disable script debugging check box is not selected. 224

14 Event Bubbling Suppose an element and one of its ancestors both respond to a given event. Then, without provision to the contrary, the event bubbles up from the element to the ancestor. Suppose you want the event to be handled by the given element s event handler and not by that of the ancestor. Then you can set the event s cancelbubble property: event.cancelbubble = true; Example: Here the document has a handler for event onclick: document.onclick = documentclick; Both paragraphs in the body use paragraphclick( b_value ), defined in the script, as their handler for onclick. One has true as the argument, which cancels bubbling. The other has false, permitting bubbling. 225

15 <html> <head> <title>event Bubbling</title> <script type = "text/javascript"> function documentclick() { alert( "You clicked in the document" ); } function paragraphclick( value ) { alert( "You clicked the text" ); if ( value ) event.cancelbubble = true; } document.onclick = documentclick; </script> </head> <body> <p onclick = "paragraphclick( false )"> Click here!</p> <p onclick = "paragraphclick( true )"> Click here, too!</p> </body> </html> 226

16 The following shows the screen after the text Click here! was clicked, and after the alert box stating You clicked the text was dismissed. The onclick event has bubbled up from the paragraph to the document. If the text Click here, too! is clicked, then an alert box stating You clicked the text again appears. But now, when this alert box is dismissed, no further alert box appears bubbling up to the document has been canceled. More DHTML Events See Figure 14.10, pp , in the text for descriptions of the remaining events, not discussed in detail in Chapter

Chapter 14 - Dynamic HTML: Event Model

Chapter 14 - Dynamic HTML: Event Model Chapter 1 - Dynamic HTML: Event Model Outline 1.1 Introduction 1.2 Event onclick 1.3 Event onload 1. Error Handling with onerror 1.5 Tracking the Mouse with Event onmousemove 1.6 Rollovers with onmouseover