Chapter 14: DHTML: Event Model CIS 275—Web Application Development for Business I
Event onclick When the user clicks an item with the mouse, the onclick event ______. Using the _____ property of the script element: <script type = "text/javascript" for = "para" event = "onclick"> alert( "Hi there" ); </script> <p id = "para">Click on this text!</p> _______ scripting: <input type = "button" value = "Click Me!" onclick = "alert( 'Hi again' )" />
Event onload The onload event fires when an element finishes loading successfully, including its _________. <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Event onload</title> <script type = "text/javascript"> var seconds = 0; function startTimer() { window.setInterval( "updateTime()", 1000 ); } function updateTime() { seconds++; soFar.innerText = seconds; } </script> </head> <body onload = "startTimer()"> <p>Seconds you have spent viewing this page so far: <strong id = "soFar"> 0 </strong></p> </body> </html>
Error Handling w/ onerror The content of web pages changes over time. Error messages presented by the browser can be confusing. Scripts can use the onerror event to execute specialized error-handling code. Such code may only work correctly if “Script debugging” is disabled in Internet Explorer. window.onerror = handleError; function doThis() { alrrt( "hi" ); // error } function handleError( errType, errURL, errLineNum ) { window.status = "Error: " + errType + " on line " + errLineNum; // Returning a value of true // cancels the browser’s reaction. return true;
Event onmousemove Event onmousemove fires repeatedly whenever the mouse moves. <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>onmousemove event</title> <script type = "text/javascript"> <!-- function updateMouseCoordinates() { coordinates.innerText = event.srcElement.tagName + " (" + event.offsetX + ", " + event.offsetY + ")"; } // --> </script> </head> <body style = "background-color: wheat" onmousemove = "updateMouseCoordinates()"> <span id = "coordinates"> (0, 0)</span><br /> <img src = "deitel.gif" style = "position: absolute; top: 100; left: 100" alt = "Deitel" /> </body> </html>
Rollovers w/ onmouseover and onmouseout When a mouse cursor moves over an element, the onmouseover event fires. When a mouse cursor leaves an element, the onmouseout event fires. Creating _______ objects for rollovers: captionImage1 = new Image(); captionImage1.src = "caption1.gif"; captionImage2 = new Image(); captionImage2.src = "caption2.gif";
Logic for onmouseover/out Image object is associated with an image ______ <img> tag has a src and an ____ When any mouseover or mouseout occurs, call the appropriate function In that function, if event was for that <img> id, set the _____ for that image to the image object See p. 460 for example.
Form Processing The onfocus event fires when an element (e.g., a form field) is made active by a click or a ______. The onblur event fires when an element loses _______. onfocus and onblur can be used to call a function onfocus = aFunction(); onblur = anotherFunction(); onblur is especially helpful to _________ user input in a form field. The onsubmit and onreset events fire when the Submit or Reset buttons are clicked, respectively. onsubmit is useful for confirming submission.