Chapter 16 – Dynamic HTML: Event Model

2000 Deitel & Associates, Inc. All rights reserved. 2000 Deitel & Associates, Inc. All rights reserved.

Chapter 16 – Dynamic HTML:Event Model

Outline16.1 Introduction16.2 Event ONCLICK16.3 Event ONLOAD16.4 Error Handling with ONERROR16.5 Tracking the Mouse with Event ONMOUSEMOVE16.6 Rollovers with ONMOUSEOVER and ONMOUSEOUT16.7 Form Processing with ONFOCUS and ONBLUR16.8 More Form Processing with ONSUBMIT and ONRESET16.9 Event Bubbling


16.1 Introduction

• Event model– Scripts respond to user actions and change page

accordingly• Moving mouse

• Scrolling screen

• Entering keystrokes

– Content more dynamic

– Interfaces more intuitive


16.2 Event ONCLICK

• ONCLICK event – Fires when user clicks mouse

• ID attribute– Specifies unique identifier for HTML element


Outline

1. Use scripting to respond to ONCLICK event

2. Specify event handlers inline

1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

2<HTML>

3

4

5

6

7<HEAD>

8<TITLE>DHTML Event Model - ONCLICK</TITLE>

9

10

11

12<SCRIPT LANGUAGE = "JavaScript" FOR = "para" EVENT = "onclick">

13

14 alert( "Hi there" );

15

16</SCRIPT>

17</HEAD>

18

19<BODY>

20

21

22<P ID = "para">Click on this text!</P>

23

24

25<INPUT TYPE = "button" VALUE = "Click Me!"

26 ONCLICK = "alert( 'Hi again' )">

27

28</BODY>

29</HTML>


Triggering an ONCLICK event


16.3 Event ONLOAD

• ONLOAD event– Fires when element finishes loading successfully

– Often used in BODY tag• Initiate scripts as soon as page loads


Outline

1.1Define function startTimer

2.1 ONLOAD event in BODY triggers startTimer

1<HTML>

2

3

4

5

6<HEAD>

7<TITLE>DHTML Event Model - ONLOAD</TITLE>

8<SCRIPT LANGUAGE = "JavaScript">

9

10var seconds = 0;

11

12function startTimer(){

13 // 1000 milliseconds = 1 second

14 window.setInterval( "updateTime()", 1000 );

15}

16

17function updateTime(){

18 seconds++;

19 soFar.innerText = seconds;

20}

21

22</SCRIPT>

23</HEAD>

24

25<BODY ONLOAD = "startTimer()">

26

27<P>Seconds you have spent viewing this page so far:

28<A ID = "soFar" STYLE = "font-weight: bold">0</A></P>

29

30</BODY>

31</HTML>


Demonstrating the ONLOAD event


16.4 Error Handling with ONERROR

• ONERROR event– Error dialog box presented by browsers usually

confusing to user

– Use ONERROR event to restrain dialog box and handle errors elegantly

– One of few events that pass parameters• Three parameters:

– Type of error

– URL of file with error

– Line number of error

– Use to prevent incompatible browsers from complaining about scripts they cannot process


Outline

1.1 Indicate function handleError is to execute when ONERROR event triggered in window object

1.2 Define function handleError

1.3 Return true to event handler to cancel browser’s default response

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

2 <HTML>

3

4 

5 

6

7 <HEAD>

8 <TITLE>DHTML Event Model - ONERROR</TITLE>

9 <SCRIPT LANGUAGE = "JavaScript">

10

11 // Specify that if an ONERROR event is triggered in the window

12 // function handleError should execute

13 window.onerror = handleError;

14

15 function doThis() {

16 alrrt( "hi" ); // alert misspelled, creates an error

17 }

18

19 // The ONERROR event passes three values to the function: the

20 // name of the error, the url of the file, and the line number.

21 function handleError( errType, errURL, errLineNum )

22 {

23 // Writes to the status bar at the bottom of the window.

24 window.status = "Error: " + errType + " on line " +

25 errLineNum;

26

27 // Returning a value of true cancels the browser’s reaction.

28 return true;

29 }

30

31 </SCRIPT>


Outline32</HEAD>

33

34<BODY>

35

36<INPUT ID = "mybutton" TYPE = "button" VALUE = "Click Me!"

37 ONCLICK = "doThis()">

38

39</BODY>

40</HTML>

2. Page rendered by browser

Custom error output


16.5 Tracking the Mouse with Event ONMOUSEMOVE

• ONMOUSEMOVE event– Fires constantly whenever mouse in motion

• event object– Contains info about triggered event– srcElement

• Pointer to element object that triggered event

– offsetX and offsetY• Give location of mouse cursor relative to top-left corner of

object in which event triggered


Outline

1. Define function updateMouseCoordinates

1.1 Use properties of event object to track mouse cursor

1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

2<HTML>

3

4

5

6

7<HEAD>

8<TITLE>DHTML Event Model - ONMOUSEMOVE event</TITLE>

9<SCRIPT LANGUAGE = "JavaScript">

10 function updateMouseCoordinates()

11 {

12 coordinates.innerText = event.srcElement.tagName +

13 " (" + event.offsetX + ", " + event.offsetY + ")";

14 }

15

16</SCRIPT>

17</HEAD>

18

19<BODY ONMOUSEMOVE = "updateMouseCoordinates()">

20

21<SPAN ID = "coordinates">(0, 0)</SPAN><BR>

22<IMG SRC = "deitel.gif" STYLE = "position: absolute; top: 100;

23 left: 100">

24

25</BODY>

26</HTML>


Demonstrating the OMOUSEMOVE event

Updated text (keeps changing as you move the mouse)


16.6 Rollovers with ONMOUSEOVER and ONMOUSEOUT

• ONMOUSEOVER event– Fires when mouse cursor moves over an element

• ONMOUSEOUT event– Fires when mouse cursor leaves the element

• Combine events for rollover effect– Pre-load images


Outline

1.1 Pre-load images

1.2 Define functions mOver and mOut

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">2 <HTML>34 5 67 <HEAD>8 <TITLE>DHTML Event Model - ONMOUSEOVER and ONMOUSEOUT</TITLE>9 <SCRIPT LANGUAGE = "JavaScript">1011 captionImage1 = new Image();12 captionImage1.src = "caption1.gif";13 captionImage2 = new Image();14 captionImage2.src = "caption2.gif";1516 function mOver() 17 {18 if ( event.srcElement.id == "tableCaption" ) {19 event.srcElement.src = captionImage2.src;20 return;21 }2223 // If the element which triggered ONMOUSEOVER has an ID,24 // Change its color to its ID.25 if ( event.srcElement.id )26 event.srcElement.style.color = event.srcElement.id;27 }2829 function mOut() 30 {31 if ( event.srcElement.id == "tableCaption" ) {32 event.srcElement.src = captionImage1.src;


Outline33 return;34 }3536 // If it has an ID, change the text inside to the text of37 // the ID.38 if ( event.srcElement.id )39 event.srcElement.innerText = event.srcElement.id;40 }4142 document.onmouseover = mOver;43 document.onmouseout = mOut;4445</SCRIPT>46</HEAD>4748<BODY STYLE = "background-color: wheat">4950<H1>Guess the Hex Code's Actual Color</H1>5152<P>Can you tell a color from its hexadecimal RGB code value? 53Look at the hex code, guess the color. To see what color it 54corresponds to, move the mouse over the hex code. Moving the55mouse out will display the color name.</P>5657<TABLE STYLE = "width: 50%; border-style: groove; 58 text-align: center; font-family: monospace; 59 font-weight: bold">60 61 <CAPTION>62 <IMG SRC = "caption1.gif" ID = "tableCaption">63 </CAPTION>6465 <TR>66 <TD><A ID = "Black">#000000</A>


Outline67 <TD><A ID = "Blue">#0000FF</A>

68 <TD><A ID = "Magenta">#FF00FF</A>

69 <TD><A ID = "Gray">#808080</A>

70 </TR>

71 <TR>

72 <TD><A ID = "Green">#008000</A>

73 <TD><A ID = "Lime">#00FF00</A>

74 <TD><A ID = "Maroon">#800000</A>

75 <TD><A ID = "Navy">#000080</A>

76 </TR>

77 <TR>

78 <TD><A ID = "Olive">#808000</A>

79 <TD><A ID = "Purple">#800080</A>

80 <TD><A ID = "Red">#FF0000</A>

81 <TD><A ID = "Silver">#C0C0C0</A>

82 </TR>

83 <TR>

84 <TD><A ID = "Cyan">#00FFFF</A>

85 <TD><A ID = "Teal">#008080</A>

86 <TD><A ID = "Yellow">#FFFF00</A>

87 <TD><A ID = "White">#FFFFFF</A>

88 <TR>

89</TABLE>

90

91</BODY>

92</HTML>


Events ONMOUSEOVER and ONMOUSEOUT


16.7 Form Processing with ONFOCUS and ONBLUR

• ONFOCUS event– Fires when an element gains focus

• User clicks on form field

• User uses Tab key to highlight element

• ONBLUR event– Fires when an element loses focus


Outline

1. Use ONFOCUS and ONBLUR events to provide a form with help messages

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">2 <HTML>34 5 67 <HEAD>8 <TITLE>DHTML Event Model - ONFOCUS and ONBLUR</TITLE>9 <SCRIPT LANGUAGE = "JavaScript">1011 var helpArray = 12 [ "Enter your name in this input box.",13 "Enter your email address in this input box, " +14 "in the format user@domain.",15 "Check this box if you liked our site.",16 "In this box, enter any comments you would " +17 "like us to read.",18 "This button submits the form to the " +19 "server-side script",20 "This button clears the form",21 "This TEXTAREA provides context-sensitive " +22 "help. Click on any input field or use the TAB " +23 "key to get more information about the input field." ];24 25 function helpText( messageNum ) 26 {27 myForm.helpBox.value = helpArray[ messageNum ];28 }29 </SCRIPT>30 </HEAD>3132 <BODY>


Outline33

34<FORM ID = "myForm">

35Name: <INPUT TYPE = "text" NAME = "name"

36 ONFOCUS = "helpText(0)" ONBLUR = "helpText(6)"><BR>

37Email: <INPUT TYPE = "text" NAME = "email"

38 ONFOCUS = "helpText(1)" ONBLUR = "helpText(6)"><BR>

39Click here if you like this site

40<INPUT TYPE = "checkbox" NAME = "like" ONFOCUS = "helpText(2)"

41 ONBLUR = "helpText(6)"><BR><HR>

42

43Any comments?<BR>

44<TEXTAREA NAME = "comments" ROWS = 5 COLS = 45 ONFOCUS =

45 "helpText(3)" ONBLUR = "helpText(6)"></TEXTAREA><BR>

46<INPUT TYPE = "submit" VALUE = "Submit" ONFOCUS = "helpText(4)"

47 ONBLUR = "helpText(6)">

48<INPUT TYPE = "reset" VALUE = "Reset" ONFOCUS = "helpText(5)"


50

51<TEXTAREA NAME = "helpBox" STYLE = "position: absolute;

52 right: 0; top: 0" ROWS = 4 COLS = 45>

53This TEXTAREA provides context-sensitive help. Click on any

54input field or use the TAB key to get more information about the

55input field.</TEXTAREA>

56</FORM>

57

58</BODY>

59</HTML>


Events ONFOCUS and ONBLUR


16.8 More Form Processing with ONSUBMIT and ONRESET

• ONSUBMIT event– Fires when a form is submitted

• ONRESET event– Fires when a form is reset


Outline

1. Use ONSUBMIT and ONRESET events to confirm the user’s clicking the button

Set returnValue to false to cancel the default action of the event on the element (browser submits form)

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">2 <HTML>34 5 67 <HEAD>8 <TITLE>DHTML Event Model - ONSUBMIT and ONRESET events</TITLE>9 <SCRIPT LANGUAGE = "JavaScript">1011 var helpArray = 12 [ "Enter your name in this input box.",13 "Enter your email address in this input box, " +14 "in the format user@domain.",15 "Check this box if you liked our site.",16 "In this box, enter any comments you would " +17 "like us to read.",18 "This button submits the form to the " +19 "server-side script",20 "This button clears the form",21 "This TEXTAREA provides context-sensitive " +22 "help. Click on any input field or use the TAB " +23 "key to get more information about the input field." ];2425 function helpText( messageNum ) 26 {27 myForm.helpBox.value = helpArray[ messageNum ];28 }2930 function formSubmit() {31 window.event.returnValue = false;32


Outline

Set returnValue back to true since the user has confirmed that the form should be submitted

33 if ( confirm ( "Are you sure you want to submit?" ) )34 window.event.returnValue = true;35 }3637 function formReset() {38 window.event.returnValue = false;39 40 if ( confirm ( "Are you sure you want to reset?" ) )41 window.event.returnValue = true;42 }4344</SCRIPT>45</HEAD>4647<BODY>4849<FORM ID = "myForm" ONSUBMIT = "formSubmit()" 50 ONRESET = "formReset()">51Name: <INPUT TYPE = "text" NAME = "name" ONFOCUS = "helpText(0)"

52 ONBLUR = "helpText(6)"><BR>53Email: <INPUT TYPE = "text" NAME = "email" 54 ONFOCUS = "helpText(1)" ONBLUR = "helpText(6)"><BR>55Click here if you like this site 56<INPUT TYPE = "checkbox" NAME = "like" ONFOCUS = "helpText(2)" 57 ONBLUR = "helpText(6)"><HR>5859Any comments?<BR>60<TEXTAREA NAME = "comments" ROWS = 5 COLS = 45 61 ONFOCUS = "helpText(3)" ONBLUR = "helpText(6)"></TEXTAREA><BR>

62<INPUT TYPE = "submit" VALUE = "Submit" ONFOCUS = "helpText(4)" 63 ONBLUR = "helpText(6)">64<INPUT TYPE = "reset" VALUE = "Reset" ONFOCUS = "helpText(5)"


Outline

2. Page rendered by browser


66

67<TEXTAREA NAME = "helpBox" STYLE = "position: absolute; right:0;

68 top: 0" ROWS = 4 COLS = 45>

69This TEXTAREA provides context-sensitive help. Click on any

70input field or use the TAB key to get more information about the

71input field.</TEXTAREA>

72</FORM>

73

74</BODY>

75</HTML>


16.9 Event Bubbling

• Event bubbling– Events fired in child elements also “bubble” up to their

parent elements for handling

– Cancel bubbling using cancelBubble property of event object

– Forgetting to cancel event bubbling when necessary may cause unexpected results in your scripts


Outline

1. Use cancelBubble property to cancel event bubbling

1.1 Define function documentClick

2.1 P elements pass true or false for event bubbling

1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">2<HTML>34567<HEAD>8<TITLE>DHTML Event Model - Event Bubbling</TITLE>910<SCRIPT LANGUAGE = "JavaScript">11 function documentClick() 12 {13 alert( "You clicked in the document" ); 14 }1516 function paragraphClick( value ) 17 {18 alert( "You clicked the text" );19 if ( value ) 20 event.cancelBubble = true;21 }2223 document.onclick = documentClick;24</SCRIPT>25</HEAD>2627<BODY>2829<P ONCLICK = "paragraphClick( false )">Click here!</P> 30<P ONCLICK = "paragraphClick( true )">Click here, too!</P>31</BODY>32</HTML>


Event bubbling

The event has bubbled up to the document level

The event has been canceled

Date post:	15-Jan-2016
Category:	Documents
Upload:	inara
View:	77 times
Download:	0 times

Chapter 16 – Dynamic HTML: Event Model

Documents