dhtml 2 -

Chapter 14 - Dynamic HTML: Event
Model
Outline
14.1
14.2
14.3
14.4
14.5
14.6
14.7
14.8
14.9
14.10
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
 2001 Prentice Hall, Inc. All rights reserved.
1
2
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Onclick.html


<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>DHTML Event Model - onclick</title>
Outline
The script element will display an alert
dialog box if the onclick event occurs
for the element whose id is para.



<script type = "text/javascript" for = "para"
event = "onclick">
<!-alert( "Hi there" );
// -->
</script>
</head>
JavaScript enables the
user to respond to events.
The onclick event occurs when
the user clicks the mouse.
<body>

<p id = "para">Click on this text!</p>

<input type = "button" value = "Click Me!"
onclick = "alert( 'Hi again' )" />
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.
</body>
</html>
 2001 Prentice Hall, Inc.
All rights reserved.
3
Outline
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).
 2001 Prentice Hall, Inc.
All rights reserved.
4
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Onload.html


<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>DHTML Event Model - onload</title>
<script type = "text/javascript">
<!-var seconds = 0;
Outline
Function startTimer will call function
updateTime every 1000 milliseconds.
Method window.setInterval is used to
invoke function updateTime every second.
function startTimer() {
// 1000 milliseconds = 1 second
window.setInterval( "updateTime()", 1000 );
}
function updateTime() {
seconds++;
soFar.innerText = seconds;
}
// -->
</script>
</head>
Function updateTime sets the
innerText property of the element with
soFar as an id to the number of seconds
that have elapsed since loading.
<body onload = "startTimer()">
<p>Seconds you have spent viewing this page so far:
<a id = "soFar"><strong>0</strong></a></p>
</body>
</html>
The onload event executes when
an element finishes loading.
 2001 Prentice Hall, Inc.
All rights reserved.
5
Outline
Program Output
The page will dynamically update the number of seconds
that have elapsed since the page has loaded every second.
 2001 Prentice Hall, Inc.
All rights reserved.
6
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
Outline
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

-->
<html xmlns = "http://www.w3.org/1999/xhtml">
The onerror event allows the developer
<head>
<title>DHTML Event Model - onerror</title>
to handle errors more elegantly.
<script type = "text/javascript">
<!-// Specify that if an onerror event is triggered
If an onerror event in
// in the window function handleError should execute
window.onerror = handleError;
triggered the function
handleError will be invoked.
function doThis() {
alrrt( "hi" ); // alert misspelled, creates an error
}
// 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;
// Returning a value of true cancels the
// browser’s reaction.
return true;
}
// -->
Returning true indicates that the
error has been handled successfully.
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.
 2001 Prentice Hall, Inc.
All rights reserved.
7
36
37
38
39
40
41
42
43
44
45
Outline
</script>
</head>
<body>
Onerror.html
<input id = "mybutton" type = "button" value = "Click Me!"
onclick = "doThis()" />
</body>
</html>
C ustom
e rro r
o utp ut
Program Output
The error created by trying to invoke function doThis is
handled by the message in the status bar of the browser.
 2001 Prentice Hall, Inc.
All rights reserved.
8
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

-->
The innerText property of the
<html xmlns = "http://www.w3.org/1999/xhtml">
coordinates element will be assigned
<head>
a string containing the name of the
<title>DHTML Event Model - onmousemove event</title>
<script type = "text/javascript">
element, and the coordinates of the
<!-mouse position over the element.
function updateMouseCoordinates()
{
coordinates.innerText = event.srcElement.tagName +
" (" + event.offsetX + ", " + event.offsetY + ")";
}
// -->
</script>
The offsetX and offsetY properties of the
</head>
<body style = "back-groundcolor: wheat"
onmousemove = "updateMouseCoordinates()">
event object give the location of the mouse
cursor relative to the top-left corner of the
object on which the event was triggered.
<span id = "coordinates">(0, 0)</span><br />
<img src = "deitel.gif" style = "position: absolute;
top: 100; left: 100" alt = "Deitel" />
</body>
</html>
The onmousemove event is invoked
every time the user moves the mouse.
 2001 Prentice Hall, Inc.
All rights reserved.
9
Outline
Program Output
Up dated text
(keep s c hang ing
as you m ove the
mo use)
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.
 2001 Prentice Hall, Inc.
All rights reserved.
14.6 Rollovers with onmouseover and
onmouseout
Prop erty of
event
De sc rip tio n
altkey
This value is true if Alt key was pressed when event fired.
button
Returns which mouse button was pressed by user (1: left-mouse button, 2: right-mouse button,
3: left and right buttons, 4: middle button, 5: left and middle buttons, 6: right and middle
buttons, 7: all three buttons).
cancelBubble
Set to false to prevent this event from bubbling (see Section 14.9, “Event Bubbling”).
clientX / clientY
The coordinates of the mouse cursor inside the client area (i.e., the active area where the Web
page is displayed, excluding scrollbars, navigation buttons, etc.).
ctrlKey
offsetX / offsetY
This value is true if Ctrl key was pressed when event fired.
The coordinates of the mouse cursor relative to the object that fired the event.
propertyName
recordset
returnValue
screenX / screenY
shiftKey
srcElement
type
x/y
The name of the property that changed in this event.
A reference to a data field’s recordset (see Chapter 16, “Data Binding”).
Set to false to cancel the default browser action.
The coordinates of the mouse cursor on the screen coordinate system.
This value is true if Shift key was pressed when event fired.
A reference to the object that fired the event.
The name of the event that fired.
The coordinates of the mouse cursor relative to this element’s parent element.
Fig. 14.5 Som e event ob jec t p rop e rties.
 2001 Prentice Hall, Inc. All rights reserved.
10
11
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
Outline
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Onmouseoverout.html


<html xmlns = "http://www.w3.org/1999/xhtml">
<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";
The function mOver handles the
onmouseover event for the image
by setting its src attribute to the src
property of the appropriate image.
function mOver()
{
if ( event.srcElement.id == "tableCaption" ) {
event.srcElement.src = captionImage2.src;
return;
}
// 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;
}
 2001 Prentice Hall, Inc.
All rights reserved.
12
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
Outline
function mOut()
{
if ( event.srcElement.id == "tableCaption" ) {
event.srcElement.src = captionImage1.src;
return;
}
Onmouseoverout.html
// 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;
}
document.onmouseover = mOver;
document.onmouseout = mOut;
// -->
</script>
</head>
The function mOut handles
the onmouseout event for
the image. It works similarly
to the mOver function.
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.
<body style = "background-color: wheat">
<h1>Guess the Hex Code's Actual Color</h1>
<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>
<table style = "width: 50%; border-style: groove;
text-align: center; font-family: monospace;
font-weight: bold">
The onmouseover event
occurs when the mouse cursor
moves over an element.
The onmouseout event occurs when
the mouse cursor leaves the element.
 2001 Prentice Hall, Inc.
All rights reserved.
13
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<caption>
<img src = "caption1.gif" id = "tableCaption"
alt = "Table Caption" />
</caption>
<tr>
<td><a
<td><a
<td><a
<td><a
</tr>
<tr>
<td><a
<td><a
<td><a
<td><a
</tr>
<tr>
<td><a
<td><a
<td><a
<td><a
</tr>
<tr>
<td><a
<td><a
<td><a
<td><a
</tr>
</table>
id
id
id
id
=
=
=
=
"Black">#000000</a></td>
"Blue">#0000FF</a></td>
"Magenta">#FF00FF</a></td>
"Gray">#808080</a></td>
id
id
id
id
=
=
=
=
"Green">#008000</a></td>
"Lime">#00FF00</a></td>
"Maroon">#800000</a></td>
"Navy">#000080</a></td>
id
id
id
id
=
=
=
=
"Olive">#808000</a></td>
"Purple">#800080</a></td>
"Red">#FF0000</a></td>
"Silver">#C0C0C0</a></td>
id
id
id
id
=
=
=
=
"Cyan">#00FFFF</a></td>
"Teal">#008080</a></td>
"Yellow">#FFFF00</a></td>
"White">#FFFFFF</a></td>
Outline
Onmouseoverout.html
</body>
</html>
 2001 Prentice Hall, Inc.
All rights reserved.
14
Outline
Program Output
Onrollover the text will change to the
color of the corresponding hex code.
 2001 Prentice Hall, Inc.
All rights reserved.
15
Outline
Program Output
Onmouseout the hex value will be
replaced by the color it represents.
 2001 Prentice Hall, Inc.
All rights reserved.
16
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

-->
Outline
Onfocusblur.html
<html xmlns = "http://www.w3.org/1999/xhtml">
The script changes the text inside
<head>
<title>DHTML Event Model - onfocus and onblur</title> the text box in the upper-right
<script type = "text/javascript">
corner based on the messageNum
<!-passed to helpText.
var helpArray =
[ "Enter your name in this input box.",
"Enter your email address in this input box, " +
"in the format user@domain.",
"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." ];
function helpText( messageNum )
{
myForm.helpBox.value = helpArray[ messageNum ];
}
// -->
</script>
</head>
 2001 Prentice Hall, Inc.
All rights reserved.
17
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
Outline
<body>
<form id = "myForm" action = "">
Name: <input type = "text" name = "name"
onfocus = "helpText(0)" onblur = "helpText(6)" /><br />
Email: <input type = "text" name = "email"
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 />
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)" />
Onfocusblur.html
The onfocus event fires
when an element gains focus.
<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>
</body>
</html>
The onblur event fires when an element loses focus,
which occurs when another control gains the focus.
 2001 Prentice Hall, Inc.
All rights reserved.
18
Outline
Program Output
The other elements are currently onblur.
The focus in this form is currently on the email text box
as could be seen by the location of the mouse cursor.
 2001 Prentice Hall, Inc.
All rights reserved.
19
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


Outline
Onsubmitreset.ht
ml
<html xmlns = "http://www.w3.org/1999/xhtml">
<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 email address in this input box, " +
"in the format user@domain.",
"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." ];
function helpText( messageNum )
{
myForm.helpBox.value = helpArray[ messageNum ];
}
 2001 Prentice Hall, Inc.
All rights reserved.
20
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
Outline
function formSubmit() {
window.event.returnValue = false;
if ( confirm ( "Are you sure you want to submit?" ) )
window.event.returnValue = true;
}
function formReset() {
window.event.returnValue = false;
if ( confirm( "Are you sure you want to reset?" )
window.event.returnValue = true;
}
// -->
</script>
</head>
<body>
Onsubmitreset.ht
ml
The returnValue property
is set to false and cancels
)the default action of the event
on the element.
A dialog to ask the user to confirm the
action is displayed, if the user confirms
then the action is executed on the form.
<form id = "myForm" onsubmit = "formSubmit()"
onreset = "formReset()" action = "">
Name: <input type = "text" name = "name"
onfocus = "helpText(0)" onblur = "helpText(6)" /><br />
Email: <input type = "text" name = "email"
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 />
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)" />
 2001 Prentice Hall, Inc.
All rights reserved.
21
70
71
72
73
74
75
76
77
78
79
80
81
Outline
<input type = "reset" value = "Reset" onfocus =
"helpText(5)" onblur = "helpText(6)" />
<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>
Onsubmitreset.ht
ml
</body>
</html>
Program Output
When the user clicks on the Submit
button, a dialog pops up asking the
user to confirm the submission.
 2001 Prentice Hall, Inc.
All rights reserved.
22
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Outline
Bubbling.html


<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>DHTML Event Model - Event Bubbling</title>
<script type = "text/javascript">
<!-function documentClick()
{
alert( "You clicked in the document" );
}
function paragraphClick( value )
{
alert( "You clicked the text" );
By setting the cancelBubble method
to true, disables event bubbling.
if ( value )
event.cancelBubble = true;
}
document.onclick = documentClick;
// -->
</script>
</head>
 2001 Prentice Hall, Inc.
All rights reserved.
23
32
33
34
35
36
37
Outline
<body>
<p onclick = "paragraphClick( false )">Click here!</p>
<p onclick = "paragraphClick( true )">Click here, too!</p>
</body>
</html>
Bubbling.html
Program Output
The e vent has bubb led
up to the d oc um ent
le vel
Clicking on the first p element
triggers line 27 because the
onclick event has bubbled up
to the document level.
Clicking on the second p
element passes a value of true
to function paragraphClick,
which will disable the event
bubbling for this event.
The ev ent ha s be en
c anc e led
 2001 Prentice Hall, Inc.
All rights reserved.
24
14.10 More DHTML Events
Eve nt
De sc rip tio n
Clipboard events
onbeforecut
onbeforecopy
onbeforepaste
oncopy
oncut
Fires before a selection is cut to the clipboard.
onabort
onpaste
Data binding events
Fires if image transfer has been interrupted by user.
onafterupdate
onbeforeupdate
oncellchange
ondataavailable
ondatasetchanged
ondatasetcomplete
Fires immediately after a databound object has been updated.
onerrorupdate
onrowenter
Fires if an error occurs while updating a data field.
Fires
when
available.
a
new
onrowexit
Fires
when
finished.
a
row
onrowsdelete
onrowsinserted
Fig. 14.10
Dyna m ic
Fires when a row of data from the data source is deleted.
Fires before a selection is copied to the clipboard.
Fires before a selection is pasted from the clipboard.
Fires when a selection is copied to the clipboard.
Fires when a selection is cut to the clipboard.
Fires when a selection is pasted from the clipboard.
Fires before a data source is updated.
Fires when a data source has changed.
Fires when new data from a data source become available.
Fires when content at a data source has changed.
Fires
when
completed.
transfer
of
row
of
data
from
the
of
data
from
data
from
the
Fires when a row of data from the data source is inserted.
HTM L e ve nts.
 2001 Prentice Hall, Inc. All rights reserved.
data
the
data
source
data
source
source
has
has
is
just
25
14.10 More DHTML Events
Eve nt
De sc rip tio n
Keyboard Events
onhelp
onkeydown
onkeypress
onkeyup
marquee events
onbounce
Fires when the user initiates help (i.e., by pressing the F1 key).
onfinish
onstart
Mouse events
Fires when a marquee finishes its scrolling.
oncontextmenu
ondblclick
ondrag
ondragend
ondragenter
ondragleave
ondragover
Fires when the context menu is shown (right-click).
ondragstart
ondrop
Fires when a mouse drag begins.
onmousedown
onmouseup
Fig. 14.10
Dyna m ic
Fires when a mouse button is pressed down.
Fires when the user pushes down a key.
Fires when the user presses a key.
Fires when the user ends a key press.
Fires
when
direction.
a
scrolling
marquee
bounces
back
in
the
other
valid
target
Fires when a marquee begins a new loop.
Fires when the mouse is double-clicked.
Fires during a mouse drag.
Fires when a mouse drag ends.
Fires when something is dragged onto an area.
Fires when something is dragged out of an area.
Fires when a drag is held over an area.
Fires
when
during a drag.
a
mouse
button
Fires when a mouse button is released.
HTM L e ve nts.
 2001 Prentice Hall, Inc. All rights reserved.
is
released
over
a
26
14.10 More DHTML Events
Eve nt
De sc rip tio n
Miscellaneous Events
onafterprint
onbeforeeditfocus
onbeforeprint
onbeforeunload
Fires immediately after the document prints.
Fires before an element gains focus for editing.
Fires before a document is printed.
Fires before a document is unloaded (i.e., the window was closed or a link was clicked).
onchange
Fires when a new choice is made in a select element, or when a text input is changed and
the element loses focus.
onfilterchange
Fires when a filter changes properties or finishes a transition (see Chapter 15, Filters and
Transitions).
onlosecapture
onpropertychange
onreadystatechange
Fires when the releaseCapture method is invoked.
onreset
Fires
when
a
<input type = "reset">).
onresize
Fires when the size of an object changes (i.e., the user resizes a window or frame).
onscroll
onselect
Fires when a window or frame is scrolled.
onselectstart
onstop
onunload
Fig. 14.10
Dyna m ic
Fires when the object is selected.
Fires when the property of an object is changed.
Fires
changes.
when
Fires
when
textarea).
readyState
the
a
form
text
resets
selection
Fires when the user stops loading the object.
Fires when a page is about to unload.
HTM L e ve nts.
 2001 Prentice Hall, Inc. All rights reserved.
property
(i.e.,
begins
the
(applies
of
an
user
to
element
clicks
input
an
or

Download Report

dhtml 2 -

Paperzz.com

Your Paperzz