2 6

Click on this text!

33 Onclick.html The script element will display an alert dialog box if the onclick event occurs for the element whose id is para. JavaScript enables the user to respond to events. The onclick event occurs when the user clicks the mouse. The p element is assigned an id that can be used to reference it. The input element creates a button that displays an alert when clicked."> 2 6

Click on this text!

33 Onclick.html The script element will display an alert dialog box if the onclick event occurs for the element whose id is para. JavaScript enables the user to respond to events. The onclick event occurs when the user clicks the mouse. The p element is assigned an id that can be used to reference it. The input element creates a button that displays an alert when clicked.">

Presentation is loading. Please wait.

Presentation is loading. Please wait.

Chapter 14 - Dynamic HTML: Event Model

Published byJohan Widjaja Modified over 5 years ago

Similar presentations

Presentation on theme: "Chapter 14 - Dynamic HTML: Event Model"— Presentation transcript:

1 Chapter 14 - Dynamic HTML: Event Model
Outline Introduction Event onclick Event onload Error Handling with onerror Tracking the Mouse with Event onmousemove Rollovers with onmouseover and onmouseout Form Processing with onfocus and onblur More Form Processing with onsubmit and onreset Event Bubbling More DHTML Events

2 JavaScript enables the user to respond to events.
1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " 4 5 <!-- Fig 14.1: onclick.html > 6 <!-- Demonstrating the onclick event --> 7 8 <html xmlns = " <head> <title>DHTML Event Model - onclick</title> 11 <!-- The for attribute declares the script for --> <!-- a certain element, and the event for a --> <!-- certain event > <script type = "text/javascript" for = "para" event = "onclick"> <!-- alert( "Hi there" ); // --> </script> </head> 22 <body> 24 <!-- The id attribute gives a unique identifier --> <p id = "para">Click on this text!</p> 27 <!-- You can specify event handlers inline --> <input type = "button" value = "Click Me!" onclick = "alert( 'Hi again' )" /> 31 </body> 33 </html> Onclick.html The script element will display an alert dialog box if the onclick event occurs for the element whose id is para. JavaScript enables the user to respond to events. The onclick event occurs when the user clicks the mouse. The p element is assigned an id that can be used to reference it. The input element creates a button that displays an alert when clicked.

3 Alert invoked by script (lines 15-20).
Program Output Alert invoked by script (lines 15-20). Button created by the input element (lines 29-30). Alert invoked by the input element (lines 29-30).

4 The onload event executes when an element finishes loading.
1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " 4 5 <!-- Fig. 14.2: onload.html > 6 <!-- Demonstrating the onload event --> 7 8 <html xmlns = " <head> <title>DHTML Event Model - onload</title> <script type = "text/javascript"> <!-- var seconds = 0; 14 function startTimer() { // 1000 milliseconds = 1 second window.setInterval( "updateTime()", 1000 ); } 19 function updateTime() { seconds++; soFar.innerText = seconds; } // --> </script> </head> 27 <body onload = "startTimer()"> 29 <p>Seconds you have spent viewing this page so far: <a id = "soFar"><strong>0</strong></a></p> 32 </body> 34 </html> Onload.html Function startTimer will call function updateTime every 1000 milliseconds. Method window.setInterval is used to invoke function updateTime every second. Function updateTime sets the innerText property of the element with soFar as an id to the number of seconds that have elapsed since loading. The onload event executes when an element finishes loading.

5 Program Output The page will dynamically update the number of seconds that have elapsed since the page has loaded every second.

6 Returning true indicates that the error has been handled successfully.
1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " 4 5 <!-- Fig 14.3: onerror.html > 6 <!-- Demonstrating the onerror event --> 7 8 <html xmlns = " <head> <title>DHTML Event Model - onerror</title> <script type = "text/javascript"> <!-- // Specify that if an onerror event is triggered // in the window function handleError should execute window.onerror = handleError; 16 function doThis() { alrrt( "hi" ); // alert misspelled, creates an error } 20 // The ONERROR event passes three values to the // function: the name of the error, the url of // the file, and the line number. function handleError( errType, errURL, errLineNum ) { // Writes to the status bar at the // bottom of the window. window.status = "Error: " + errType + " on line " + errLineNum; 30 // Returning a value of true cancels the // browser’s reaction. return true; } // --> Onerror.html The onerror event allows the developer to handle errors more elegantly. If an onerror event in triggered the function handleError will be invoked. The call to display the alert dialog is purposely written incorrectly to invoke the onerror event. Function handleError will display the error type and the line that causes the error on the status bar of the browser. Returning true indicates that the error has been handled successfully.

7 Onerror.html Program Output
</script> </head> 38 <body> 40 <input id = "mybutton" type = "button" value = "Click Me!" onclick = "doThis()" /> 43 </body> 45 </html> Onerror.html Program Output The error created by trying to invoke function doThis is handled by the message in the status bar of the browser.

8 The onmousemove event is invoked every time the user moves the mouse.
1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " 4 5 <!-- Fig. 14.4: onmousemove.html > 6 <!-- Demonstrating the onmousemove event --> 7 8 <html xmlns = " <head> <title>DHTML Event Model - onmousemove event</title> <script type = "text/javascript"> <!-- function updateMouseCoordinates() { coordinates.innerText = event.srcElement.tagName + " (" + event.offsetX + ", " + event.offsetY + ")"; } // --> </script> </head> 21 <body style = "back-groundcolor: wheat" onmousemove = "updateMouseCoordinates()"> 24 <span id = "coordinates">(0, 0)</span><br /> <img src = "deitel.gif" style = "position: absolute; top: 100; left: 100" alt = "Deitel" /> 28 </body> 30 </html> Onmousemove.html The innerText property of the coordinates element will be assigned a string containing the name of the element, and the coordinates of the mouse position over the element. The offsetX and offsetY properties of the event object give the location of the mouse cursor relative to the top-left corner of the object on which the event was triggered. The onmousemove event is invoked every time the user moves the mouse.

9 Program Output The mouse is over the body of the page as indicated by the text at the top right. The mouse is over the image on the page as indicated by the text at the top right.

10 14.6 Rollovers with onmouseover and onmouseout

11 1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " 4 5 <!-- Fig 14.6: onmouseoverout.html > 6 <!-- Events onmouseover and onmouseout --> 7 8 <html xmlns = " <head> <title> DHTML Event Model - onmouseover and onmouseout </title> <script type = "text/javascript"> <!-- captionImage1 = new Image(); captionImage1.src = "caption1.gif"; captionImage2 = new Image(); captionImage2.src = "caption2.gif"; 19 function mOver() { if ( event.srcElement.id == "tableCaption" ) { event.srcElement.src = captionImage2.src; return; } 26 // If the element which triggered onmouseover has // an id, change its color to its id. if ( event.srcElement.id ) event.srcElement.style.color = event.srcElement.id; } 33 Onmouseoverout.html The function mOver handles the onmouseover event for the image by setting its src attribute to the src property of the appropriate image.

12 The onmouseout event occurs when the mouse cursor leaves the element.
function mOut() { if ( event.srcElement.id == "tableCaption" ) { event.srcElement.src = captionImage1.src; return; } 40 // If it has an id, change the text inside to the // text of the id. if ( event.srcElement.id ) event.srcElement.innerText = event.srcElement.id; } 46 document.onmouseover = mOver; document.onmouseout = mOut; // --> </script> </head> 52 <body style = "background-color: wheat"> 54 <h1>Guess the Hex Code's Actual Color</h1> 56 <p>Can you tell a color from its hexadecimal RGB code value? Look at the hex code, guess the color. To see what color it corresponds to, move the mouse over the hex code. Moving the mouse out will display the color name.</p> 62 <table style = "width: 50%; border-style: groove; text-align: center; font-family: monospace; font-weight: bold"> 66 The function mOut handles the onmouseout event for the image. It works similarly to the mOver function. Onmouseoverout.html This code tests if an id is specified, and if it is, the code changes the color of the element to match the color name in the id. The onmouseover event occurs when the mouse cursor moves over an element. The onmouseout event occurs when the mouse cursor leaves the element.

13 Onmouseoverout.html 67 <caption>
<img src = "caption1.gif" id = "tableCaption" alt = "Table Caption" /> </caption> 71 <tr> <td><a id = "Black">#000000</a></td> <td><a id = "Blue">#0000FF</a></td> <td><a id = "Magenta">#FF00FF</a></td> <td><a id = "Gray">#808080</a></td> </tr> <tr> <td><a id = "Green">#008000</a></td> <td><a id = "Lime">#00FF00</a></td> <td><a id = "Maroon">#800000</a></td> <td><a id = "Navy">#000080</a></td> </tr> <tr> <td><a id = "Olive">#808000</a></td> <td><a id = "Purple">#800080</a></td> <td><a id = "Red">#FF0000</a></td> <td><a id = "Silver">#C0C0C0</a></td> </tr> <tr> <td><a id = "Cyan">#00FFFF</a></td> <td><a id = "Teal">#008080</a></td> <td><a id = "Yellow">#FFFF00</a></td> <td><a id = "White">#FFFFFF</a></td> </tr> </table> 97 </body> 99 </html> Onmouseoverout.html

14 Program Output Onrollover the text will change to the color of the corresponding hex code.

15 Onmouseout the hex value will be replaced by the color it represents.
Program Output Onmouseout the hex value will be replaced by the color it represents.

16 1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " 4 5 <!-- Fig. 14.7: onfocusblur.html > 6 <!-- Demonstrating the onfocus and onblur events --> 7 8 <html xmlns = " <head> <title>DHTML Event Model - onfocus and onblur</title> <script type = "text/javascript"> <!-- var helpArray = [ "Enter your name in this input box.", "Enter your address in this input box, " + "in the format "Check this box if you liked our site.", "In this box, enter any comments you would " + "like us to read.", "This button submits the form to the " + "server-side script", "This button clears the form", "This textarea provides context-sensitive " + "help. Click on any input field or use the TAB " + "key to get more information about the " + "input field." ]; 27 function helpText( messageNum ) { myForm.helpBox.value = helpArray[ messageNum ]; } // --> </script> </head> 35 Onfocusblur.html The script changes the text inside the text box in the upper-right corner based on the messageNum passed to helpText.

17 The onfocus event fires when an element gains focus.
<body> 37 <form id = "myForm" action = ""> Name: <input type = "text" name = "name" onfocus = "helpText(0)" onblur = "helpText(6)" /><br /> <input type = "text" name = " " onfocus = "helpText(1)" onblur = "helpText(6)" /><br /> Click here if you like this site <input type = "checkbox" name = "like" onfocus = "helpText(2)" onblur = "helpText(6)" /><br /><hr /> 46 Any comments?<br /> <textarea name = "comments" rows = "5" cols = "45" onfocus = "helpText(3)" onblur = "helpText(6)"> </textarea><br /> <input type = "submit" value = "Submit" onfocus = "helpText(4)" onblur = "helpText(6)" /> <input type = "reset" value = "Reset" onfocus = "helpText(5)" onblur = "helpText(6)" /> 55 <textarea name = "helpBox" style = "position: absolute; right: 0; top: 0" rows = "4" cols = "45"> This textarea provides context-sensitive help. Click on any input field or use the Tab key to get more information about the input field.</textarea> </form> 62 </body> 64 </html> Onfocusblur.html The onfocus event fires when an element gains focus. The onblur event fires when an element loses focus, which occurs when another control gains the focus.

18 The other elements are currently onblur.
Program Output The focus in this form is currently on the text box as could be seen by the location of the mouse cursor. The other elements are currently onblur.

19 Onsubmitreset.html 1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " 4 5 <!-- Fig 14.8: onsubmitreset.html > 6 <!-- Demonstrating the onsubmit and onreset events --> 7 8 <html xmlns = " <head> <title> DHTML Event Model - onsubmit and onreset events </title> <script type = "text/javascript"> <!-- var helpArray = [ "Enter your name in this input box.", "Enter your address in this input box, " + "in the format "Check this box if you liked our site.", "In this box, enter any comments you would " + "like us to read.", "This button submits the form to the " + "server-side script", "This button clears the form", "This textarea provides context-sensitive " + "help. Click on any input field or use the Tab " + "key to get more information about " + "the input field." ]; 29 function helpText( messageNum ) { myForm.helpBox.value = helpArray[ messageNum ]; } 34 Onsubmitreset.html

20 35 function formSubmit() {
window.event.returnValue = false; 37 if ( confirm ( "Are you sure you want to submit?" ) ) window.event.returnValue = true; } 41 function formReset() { window.event.returnValue = false; 44 if ( confirm( "Are you sure you want to reset?" ) ) window.event.returnValue = true; } // --> </script> </head> 51 <body> 53 <form id = "myForm" onsubmit = "formSubmit()" onreset = "formReset()" action = ""> Name: <input type = "text" name = "name" onfocus = "helpText(0)" onblur = "helpText(6)" /><br /> <input type = "text" name = " " onfocus = "helpText(1)" onblur = "helpText(6)" /><br /> Click here if you like this site <input type = "checkbox" name = "like" onfocus = "helpText(2)" onblur = "helpText(6)" /><hr /> 63 Any comments?<br /> <textarea name = "comments" rows = "5" cols = "45" onfocus = "helpText(3)" onblur = "helpText(6)"> </textarea><br /> <input type = "submit" value = "Submit" onfocus = "helpText(4)" onblur = "helpText(6)" /> The returnValue property is set to false and cancels the default action of the event on the element. Onsubmitreset.html A dialog to ask the user to confirm the action is displayed, if the user confirms then the action is executed on the form.

21 Onsubmitreset.html Program Output
<input type = "reset" value = "Reset" onfocus = "helpText(5)" onblur = "helpText(6)" /> 72 <textarea name = "helpBox" style = "position: absolute; right:0; top: 0" rows = "4" cols = "45"> This textarea provides context-sensitive help. Click on any input field or use the Tab key to get more information about the input field.</textarea> </form> 79 </body> 81 </html> Onsubmitreset.html Program Output When the user clicks on the Submit button, a dialog pops up asking the user to confirm the submission.

22 By setting the cancelBubble method to true, disables event bubbling.
1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " 4 5 <!-- Fig 14.9: bubbling.html --> 6 <!-- Disabling event bubbling --> 7 8 <html xmlns = " <head> <title>DHTML Event Model - Event Bubbling</title> 11 <script type = "text/javascript"> <!-- function documentClick() { alert( "You clicked in the document" ); } 18 function paragraphClick( value ) { alert( "You clicked the text" ); 22 if ( value ) event.cancelBubble = true; } 26 document.onclick = documentClick; // --> </script> </head> 31 Bubbling.html By setting the cancelBubble method to true, disables event bubbling.

23 Bubbling.html Program Output
<body> 33 <p onclick = "paragraphClick( false )">Click here!</p> <p onclick = "paragraphClick( true )">Click here, too!</p> </body> 37 </html> Clicking on the first p element triggers line 27 because the onclick event has bubbled up to the document level. Bubbling.html Program Output Clicking on the second p element passes a value of true to function paragraphClick, which will disable the event bubbling for this event.

24 14.10 More DHTML Events

25 14.10 More DHTML Events

26 14.10 More DHTML Events

Download ppt "Chapter 14 - Dynamic HTML: Event Model"

Similar presentations

JavaScript and the DOM Les Carr COMP3001 Les Carr COMP3001.

JavaScript and the DOM Les Carr COMP3001 Les Carr COMP3001.
Session 11 Dynamic HTML: Event Model and Filters Matakuliah: M0114/Web Based Programming Tahun: 2005 Versi: 5.

Session 11 Dynamic HTML: Event Model and Filters Matakuliah: M0114/Web Based Programming Tahun: 2005 Versi: 5.
JavaScript Forms Form Validation Cookies. What JavaScript can do  Control document appearance and content  Control the browser  Interact with user.

JavaScript Forms Form Validation Cookies. What JavaScript can do  Control document appearance and content  Control the browser  Interact with user.
Chapter 7 © 2001 by Addison Wesley Longman, Inc. 1 Chapter 7 Sebesta: Programming the World Wide Web.

Chapter 7 © 2001 by Addison Wesley Longman, Inc. 1 Chapter 7 Sebesta: Programming the World Wide Web.
JavaScript Forms Form Validation Cookies CGI Programs.

JavaScript Forms Form Validation Cookies CGI Programs.
20-Jun-15 JavaScript and HTML Simple Event Handling.

20-Jun-15 JavaScript and HTML Simple Event Handling.
Page 1 of 39 Javascript Chapters 13, 14 Vadim Parizher Computer Science Department California State University, Northridge Fall 2003 Slides from text Book.

Page 1 of 39 Javascript Chapters 13, 14 Vadim Parizher Computer Science Department California State University, Northridge Fall 2003 Slides from text Book.
Lesson 2 Event Handling. Object Event Handlers Most of the objects that make up the Document Object Model respond to asynchronous, user generated events.

Lesson 2 Event Handling. Object Event Handlers Most of the objects that make up the Document Object Model respond to asynchronous, user generated events.
 2008 Pearson Education, Inc. All rights reserved. 1 13 JavaScript: Events.

 2008 Pearson Education, Inc. All rights reserved JavaScript: Events.
CST 200 - JavaScript Validating Form Data with JavaScript.

CST JavaScript Validating Form Data with JavaScript.
Web Programming Material From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 1 Introduction The JavaScript Programming.

Web Programming Material From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 1 Introduction The JavaScript Programming.
CP476 Internet Computing JavaScript and HTML1 1.JavaScript Execution Environment The JavaScript Window object represents the window in which the browser.

CP476 Internet Computing JavaScript and HTML1 1.JavaScript Execution Environment The JavaScript Window object represents the window in which the browser.
JS: DOM Form Form Object Form Object –The Form object represents an HTML form. –For each instance of a tag in an HTML document, a Form object is created.

JS: DOM Form Form Object Form Object –The Form object represents an HTML form. –For each instance of a tag in an HTML document, a Form object is created.
CNIT 133 Interactive Web Pags – JavaScript and AJAX Event and Event Handling.

CNIT 133 Interactive Web Pags – JavaScript and AJAX Event and Event Handling.
Chapter 6: Forms JavaScript - Introductory. Previewing the Product Registration Form.

Chapter 6: Forms JavaScript - Introductory. Previewing the Product Registration Form.
Event Handlers CS101 Introduction to Computing. Learning Goals Learn about event handlers Determine how events are useful in JavaScript Discover where.

Event Handlers CS101 Introduction to Computing. Learning Goals Learn about event handlers Determine how events are useful in JavaScript Discover where.
Execution Environment for JavaScript Java Script Window object represents the window in which the browser displays documents. The Window object provides.

Execution Environment for JavaScript " Java Script Window object represents the window in which the browser displays documents. " The Window object provides.
JavaScript Part 1.

JavaScript Part 1.
1 JavaScript: Event Model November 1, 2005 Slides modified from Internet & World Wide Web: How to Program. 2004 (3rd) edition. By Deitel, Deitel, and Goldberg.

1 JavaScript: Event Model November 1, 2005 Slides modified from Internet & World Wide Web: How to Program (3rd) edition. By Deitel, Deitel, and Goldberg.
CSS Class 7 Add JavaScript to your page Add event handlers Validate a form Open a new window Hide and show elements Swap images Debug JavaScript.

CSS Class 7 Add JavaScript to your page Add event handlers Validate a form Open a new window Hide and show elements Swap images Debug JavaScript.

Similar presentations

Ads by Google