PowerPoint PresentationChapter 16 – Dynamic HTML:
16.5 Tracking the Mouse with Event ONMOUSEMOVE
16.6 Rollovers with ONMOUSEOVER and ONMOUSEOUT
16.7 Form Processing with ONFOCUS and ONBLUR
16.8 More Form Processing with ONSUBMIT and ONRESET
16.9 Event Bubbling
16.1 Introduction
Event model
Moving mouse
Scrolling screen
Entering keystrokes
16.2 Event ONCLICK
ID attribute
2000 Deitel & Associates, Inc. All rights reserved.
2000 Deitel & Associates, Inc. All rights reserved.
Outline
Specify event handlers inline
2<HTML>
6
9
10<!-- The FOR attribute declares the script for a certain
-->
11<!-- element, and the EVENT for a certain event. -->
12<SCRIPT LANGUAGE = "JavaScript" FOR = "para" EVENT =
"onclick">
13
23
26 ONCLICK = "alert( 'Hi again' )">
27
Triggering an ONCLICK event
16.3 Event ONLOAD
Often used in BODY tag
Initiate scripts as soon as page loads
2000 Deitel & Associates, Inc. All rights reserved.
2000 Deitel & Associates, Inc. All rights reserved.
Outline
1<HTML>
5
8<SCRIPT LANGUAGE = "JavaScript">
14 window.setInterval( "updateTime()", 1000 );
26
27<P>Seconds you have spent viewing this page so far:
28<A ID = "soFar" STYLE = "font-weight:
bold">0</A></P>
29
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:
Line number of error
Use to prevent incompatible browsers from complaining about scripts
they cannot process
2000 Deitel & Associates, Inc. All rights reserved.
2000 Deitel & Associates, Inc. All rights reserved.
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>
6
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;
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;
Outline
32</HEAD>
37 ONCLICK = "doThis()">
ONMOUSEMOVE event
event object
srcElement
offsetX and offsetY
Give location of mouse cursor relative to top-left corner of object
in which event triggered
2000 Deitel & Associates, Inc. All rights reserved.
2000 Deitel & Associates, Inc. All rights reserved.
Outline
1.1 Use properties of event object to track mouse cursor
1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN">
2<HTML>
6
9<SCRIPT LANGUAGE = "JavaScript">
22<IMG SRC = "deitel.gif" STYLE = "position: absolute; top:
100;
23 left: 100">
Demonstrating the OMOUSEMOVE event
2000 Deitel & Associates, Inc. All rights reserved.
2000 Deitel & Associates, Inc. All rights reserved.
16.6 Rollovers with ONMOUSEOVER and ONMOUSEOUT
ONMOUSEOVER event
ONMOUSEOUT event
Combine events for rollover effect
Pre-load images
Outline
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0
Transitional//EN">
2 <HTML>
6
9 <SCRIPT LANGUAGE = "JavaScript">
23 // 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;
Outline
34 }
35
36 // If it has an ID, change the text inside to the text of
37 // the ID.
38 if ( event.srcElement.id )
39 event.srcElement.innerText = event.srcElement.id;
49
51
52<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
the
55mouse out will display the color name.</P>
56
58 text-align: center; font-family: monospace;
59 font-weight: bold">
63 </CAPTION>
Outline
70 </TR>
71 <TR>
76 </TR>
77 <TR>
82 </TR>
83 <TR>
88 <TR>
89</TABLE>
Events ONMOUSEOVER and ONMOUSEOUT
ONFOCUS event
User clicks on form field
User uses Tab key to highlight element
ONBLUR event
2000 Deitel & Associates, Inc. All rights reserved.
2000 Deitel & Associates, Inc. All rights reserved.
Outline
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>
6
9 <SCRIPT LANGUAGE = "JavaScript">
13 "Enter your email address in this input box, " +
14 "in the format
[email protected]",
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",
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
Outline
33
39Click here if you like this site
40<INPUT TYPE = "checkbox" NAME = "like" ONFOCUS =
"helpText(2)"
41 ONBLUR = "helpText(6)"><BR><HR>
42
45 "helpText(3)" ONBLUR =
"helpText(6)"></TEXTAREA><BR>
46<INPUT TYPE = "submit" VALUE = "Submit" ONFOCUS =
"helpText(4)"
47 ONBLUR = "helpText(6)">
49 ONBLUR = "helpText(6)">
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>
Events ONFOCUS and ONBLUR
16.8 More Form Processing with ONSUBMIT and ONRESET
ONSUBMIT event
ONRESET event
2000 Deitel & Associates, Inc. All rights reserved.
2000 Deitel & Associates, Inc. All rights reserved.
Outline
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>
6
8 <TITLE>DHTML Event Model - ONSUBMIT and ONRESET
events</TITLE>
9 <SCRIPT LANGUAGE = "JavaScript">
13 "Enter your email address in this input box, " +
14 "in the format
[email protected]",
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",
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
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;
40 if ( confirm ( "Are you sure you want to reset?" ) )
41 window.event.returnValue = true;
50 ONRESET = "formReset()">
52 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>
61 ONFOCUS = "helpText(3)" ONBLUR =
"helpText(6)"></TEXTAREA><BR>
62<INPUT TYPE = "submit" VALUE = "Submit" ONFOCUS =
"helpText(4)"
63 ONBLUR = "helpText(6)">
2000 Deitel & Associates, Inc. All rights reserved.
2000 Deitel & Associates, Inc. All rights reserved.
Outline
65 ONBLUR = "helpText(6)">
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>
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
2000 Deitel & Associates, Inc. All rights reserved.
2000 Deitel & Associates, Inc. All rights reserved.
Outline
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>
9
14 }
15
19 if ( value )
20 event.cancelBubble = true;
30<P ONCLICK = "paragraphClick( true )">Click here,
too!</P>
31</BODY>
32</HTML>
Event bubbling
The event has been canceled
