iw3htp4_13-FINAL

tacitmarigoldInternet et le développement Web

25 janv. 2014 (il y a 3 années et 9 mois)

398 vue(s)



2008 Pearson Education, Inc. All rights reserved.

1

13

JavaScript:

Events



2008 Pearson Education, Inc. All rights reserved.

2

The wisest prophets make

sure of the event first.


Horace Walpole


Do you think I can listen

all day to such stuff?


Lewis Carroll



2008 Pearson Education, Inc. All rights reserved.

3

The user should feel in control of the computer;
not the other way around. This is achieved in
applications that embody three qualities:
responsiveness, permissiveness, and consistency.


Inside Macintosh, Volume 1


Apple Computer, Inc., 1985


We are responsible for actions performed in
response to circumstances for which we are

not responsible.


Allan Massie



2008 Pearson Education, Inc. All rights reserved.

4

OBJECTIVES

In this chapter you will learn:


The concepts of events, event handlers and
event bubbling.


To create and register event handlers that
respond to mouse and keyboard events.


To use the event object to get information
about an event.


To recognize and respond to many common
events.



2008 Pearson Education, Inc. All rights reserved.

5

13.1



Introduction


13.2



Registering Event Handlers


13.3



Event
onload



13.4



Event
onmousemove
, the
event

Object, and
this

13.5



Rollovers with
onmouseover

and
onmouseout



13.6



Form Processing with
onfocus

and
onblur



13.7



More Form Processing with
onsubmit

and

onreset

13.8



Event Bubbling


13.9



More Events


13.10

Wrap
-
Up


13.11

Web Resources




2008 Pearson Education, Inc. All rights reserved.

6

13.1 Introduction


JavaScript events


allow scripts to respond to user interactions and modify
the page accordingly


Events and event handling


help make web applications more responsive, dynamic and
interactive



2008 Pearson Education, Inc. All rights reserved.

7

13.2 Registering Event Handlers


Functions that handle events


Assigning an event handler to an event on a DOM node is called
registering an event handler


Two models for registering event handlers


Inline model treats events as attributes of XHTML elements


Traditional model assigns the name of the function to the event property of a DOM node


In the inline model, the value of the XHTML attribute is a JavaScript
statement to be executed when the event occurs


In the traditional model, the value of the event property of a DOM
node is the name of a function to be called when the event occurs


Traditional registration of event handlers enables quick and easy
assignment of event handlers to many elements using repetition
statements, instead of adding an inline event handler to each XHTML
element



2008 Pearson Education,
Inc. All rights reserved.

8


1

<?xml version =
"1.0"
encoding =
"utf
-
8"
?>


2

<!DOCTYPE html PUBLIC
"
-
//W3C//DTD XHTML 1.0 Strict//EN"


3


"http://www.w3.org/TR/xhtml1/DTD/xhtml1
-
strict.dtd"
>


4



5

<!
--
Fig.

13.1: registering.html
--
>


6

<!
--
Event registration models.
--
>


7

<html xmlns =
"http://www.w3.org/1999/xhtml"
>


8

<head>


9

<title>
Event Registration Models
</title>

10

<style type =
"text/css"
>

11


div
{
padding:

5px
;

12


margin:

10px
;

13


border:

3px solid #
0000BB
;

14


width:

12em
}

15

</style>

16

<script type =
"text/javascript"
>

17

<!
--

18

// handle the onclick event regardless of how it was registered

19


function
handleEvent()

20

{

21

alert(
"The event was successfully handled."
);

22

}
// end function handleEvent

23


24

// register the handler using the traditional model

25


function
registerHandler()

26

{

27



var
traditional = document.getElementById(
"traditional"
);

28


traditional.onclick = handleEvent;

29

}
// end function registerHandler


Outline

registering.html

(1 of 3)

Function to
handle the
onclick

event

Registers the event
handler using the
traditional model



2008 Pearson Education,
Inc. All rights reserved.

9

30

//
--
>

31

</script>

32

</head>

33

<body onload =
"registerHandler()"
>

34

<!
--
The event handler is registered inline
--
>

35

<div id =
"inline"

onclick =
"handleEvent()"
>

36

Inline registration model
</div>


37


38

<!
--
The event handler is registered by function registerHandler
--
>

39


<div id =

"traditional"
>
Traditional registration model
</div>

40

</body>

41

</html>



Outline

registering.html

(2 of 3)

Registers the
event handler
using the inline
model



2008 Pearson Education,
Inc. All rights reserved.

10



Outline

registering.html

(3 of 3)



2008 Pearson Education, Inc. All rights reserved.

11

Common Programming Error 13.1

Putting quotes around the function name
when registering it using the inline model
would assign a string to the
onclick

property of the node

a string cannot be
called.



2008 Pearson Education, Inc. All rights reserved.

12

Common Programming Error 13.2

Putting parentheses after the function

name when registering it using the inline
model would call the function immediately
and assign its return value to the
onclick

property.



2008 Pearson Education, Inc. All rights reserved.

13

13.3 Event
onload


onload

event fires whenever an element finishes
loading successfully


If a script in the
head

attempts to get a DOM
node for an XHTML element in the
body
,
getElementById

returns
null

because the
body

has not yet loaded



2008 Pearson Education,
Inc. All rights reserved.

14


1

<?xml version =
"1.0"
encoding =
"utf
-
8"
?>


2

<!DOCTYPE html PUBLIC
"
-
//W3C//DTD XHTML 1.0 Strict//EN"


3


"http://www.w3.org/TR/xhtml1/DTD/xhtml1
-
strict.dtd"
>


4



5

<!
--
Fig.

13.2: onload.html
--
>


6

<!
--
Demonstrating the onload event.
--
>


7

<html xmlns =
"http://www.w3.org/1999/xhtml"
>


8

<head>


9

<title>
onload Event
</title>

10

<script type =
"text/javascript"
>

11


<!
--

12

var
seconds =
0
;

13


14

// called when the page loads to begin the
timer

15

function
startTimer()

16

{

17




// 1000 milliseconds = 1 second

18




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

19


}
// end function startTimer

20


21

// called every 1000 ms
to update the timer

22

function
updateTime()

23

{

24



++seconds;


25



document.getElementById(
"soFar"
).innerHTML = seconds;

26


}
// end function
updateTime

27


//
--
>

28

</script>

29

</head>


Outline

onload.html

(1 of 2)

Calls function
updateTime

every second

Updates the timer
display in the
soFar

element
of the document



2008 Pearson Education,
Inc. All rights reserved.

15

30


<body onload =

"startTimer()"
>

31

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

32

<strong id =
"soFar"
>
0
</strong></p>

33

</body>

34

</html>



Outline

onload.html

(2 of 2)

As soon as the
body

has
loaded,
startTimer

is
called



2008 Pearson Education, Inc. All rights reserved.

16

Common Programming Error 13.3

Trying to get an element in a page before the
page has loaded is a common error. Avoid this
by putting your script in a function using the
onload

event to call the function.



2008 Pearson Education, Inc. All rights reserved.

17

13.4 Event
onmouseMove
, the

event
Object and
this


onmousemove

event fires whenever the user moves the mouse


event

object stores information about the event that called the
event
-
handling function


ctrlKey

property contains a boolean which reflects whether the
Ctrl

key was pressed
during the event


shiftKey

property reflects whether the
Shift

key was pressed during the event


In an event
-
handling function,
this

refers to the DOM object on
which the event occurred


this

keyword enables one event handler to apply a change to one of
many DOM elements, depending on which one received the event



2008 Pearson Education, Inc. All rights reserved.

18

13.4 Event
onmouseMove
, the

event
Object and
this

(Cont.)


Internet Explorer and Firefox do not implement
the same event models


Firefox and other W3C
-
compliant browsers (e.g.,
Safari, Opera) pass the
event

object as an
argument to the event
-
handling function


Internet Explorer, on the other hand, stores the
event

object in the
event

property of the
window

object



2008 Pearson Education,
Inc. All rights reserved.

19


1

<?xml version =
"1.0"
encoding =
"utf
-
8"
?>


2

<!DOCTYPE html PUBLIC
"
-
//W3C//DTD XHTML 1.0 Strict//EN"


3


"http://www.w3.org/TR/xhtml1/DTD/xhtml1
-
strict.dtd"
>


4



5

<!
--
Fig.

13.3: draw.html
--
>


6

<!
--
A simple drawing program.
--
>


7

<html x
mlns =
"http://www.w3.org/1999/xhtml"
>


8

<head>


9


<title>
Simple Drawing Program
</title>

10


<style type =
"text/css"
>

11


#canvas
{
width:

400px
;

12


border:

1px solid #999999
;

13


borde
r
-
collapse:

collapse
}

14


td
{
width:

4px
;

15


height:

4px
}

16


th.key
{
font
-
family:

arial, helvetica, sans
-
serif
;

17


font
-
size:

12px
;

18


border
-
bottom:

1px solid #
999999
}

19


</style>

20


<script type =
"text/javascript"
>

21

<!
--

22

//initialization function to insert cells into the table

23


function
createCanvas ()

24

{

25


var
side =
100
;

2
6


var
tbody = document.getElementById(
"tablebody"
);

27



Outline

draw.html

(1 of 5)

Sets the dimensions of a table
of cells that will act as a canvas

Eliminates space between
table cells

Creates table of cells for the
canvas



2008 Pearson Education,
Inc. All rights reserved.

20

28


for
( var i =
0
; i < side; i++ )

29

{

30


var
row = document.createElement(
"tr"
);

31



32


for
( var j =
0
; j < side; j++ )

33

{

34


var
cel
l = document.createElement(
"td"
);

35


cell.onmousemove = processMouseMove;

36

row.appendChild( cell );

37

}
// end for

38


39

tbody.appendChild( row );

40

}
// end f
or

41

}
// end function createCanvas

42


43

// processes the onmousemove event

44


function
processMouseMove( e )

45

{

46

// get the event object from IE

47


if
( !e )

48



var
e = window.event;

49


50

// turn the cell blue if the Ctrl key is pressed

51


if
( e.ctrlKey )

52


this
.style.backgroundColor =
"blue"
;

53



54

// turn the cell red if the Shift k
ey is pressed

55


if
( e.shiftKey )

56


this
.style.backgroundColor =
"red"
;

57

}
// end function processMouseMove


Outline

draw.html

(2 of 5)

Assigns
processMouseMove

as the event handler for the cell’s
onmousemove

event

Gets the
event

object in IE

Gets the
event

object in Firefox

Determines which key is
pressed and colors the cell
accordingly

this

refers to the cell that
received the event



2008 Pearson Education,
Inc. All rights reserved.

21

58


//
--
>

59

</script>

60

</head>

61


<body onload =
"createCanvas()"
>

62


<table id =

"canvas"
class =
"canvas"
><tbody id =

"tablebody"
>

63


<tr><th class =
"key"
colspan =
"100"
>
Hold
<tt>
ctrl
</tt>

64

to
draw blue. Hold
<tt>
shift
</tt>
to draw red.
</th></tr>

65


</tbody></table>

66

</body>

67

</html>



Outline

draw.html

(3 of 5)



2008 Pearson Education,
Inc. All rights reserved.

22



Outline

draw.html

(4 of 5)



2008 Pearson Education,
Inc. All rights reserved.

23



Outline

draw.html

(5 of 5)



2008 Pearson Education, Inc. All rights reserved.

24

Common Programming Error 13.4

Although you can omit the
tbody

element in
an XHTML table, without it you cannot
append
tr

elements as children of a
table

using JavaScript. While Firefox treats
appended rows as members of the table body,
Internet Explorer will not render any table
cells that are dynamically added to a table
outside a
thead
,
tbody

or
tfoot

element.



2008 Pearson Education, Inc. All rights reserved.

25


Property

Description


altKey

This value is
true
if the
Alt

key was pressed when the event fired.


cancelBubble

Set to
true
to prevent the event from bubbling. Defaults to
false
.
(See Section 14.9, Event Bubbling.)


clientX
and
clientY

The coordinates o
f the mouse cursor inside the client area (i.e., the
active area where the web page is displayed, excluding scrollbars,
navigation buttons, etc.).


ctrlKey

This value is
true
if the
Ctrl
key was pressed when the event fired.


keyCode

The ASCII code of th
e key pressed in a keyboard event. See
Appendix D for more information on the ASCII character set.


screenX
and
screenY

The coordinates of the mouse cursor on the screen coordinate system.


shiftKey

This value is
true
if the
Shift
key was pressed when th
e event fired.


type

The name of the event that fired,

without the prefix

"on"
.


Fig. 13.4

|
Some
event

object properties.



2008 Pearson Education, Inc. All rights reserved.

26

13.5 Rollovers with
onmouseover

and
onmouseout


When the mouse cursor enters an element, an
onmouseover

event occurs for that element


When the mouse cursor leaves the element, an
onmouseout

event occurs for that element


Creating an
Image

object and setting its
src

property
preloads the image


The
event

object stores the node on which the action
occurred


In Internet Explorer, this node is stored in the
event

object’s
srcElement

property


In Firefox, it is stored in the
event

object’s
target

property



2008 Pearson Education,
Inc. All rights reserved.

27


1

<?xml version =
"1.0"
encoding =
"utf
-
8"
?>


2

<!DOCTYPE html PUBLIC

"
-
//W3C//DTD XHTML 1.0 Strict//EN"


3

"http://www.w3.org/TR/xhtml1/DTD/xhtml1
-
strict.dtd"
>


4



5

<!
--
Fig.

13.5: onmouseoverout.html
--
>


6

<!
--
Events onmouseover and onmouseo
ut.
--
>


7

<html xmlns =

"http://www.w3.org/1999/xhtml"
>


8

<head>


9

<title>
Events onmouseover and onmouseout
</title>

10

<style type =
"text/css"
>

11


body
{
background
-
color:

wheat
}

12


table
{
border
-
style:

groo
ve
;

13


text
-
align:

center
;

14


font
-
family:

monospace
;

15


font
-
weight:

bold
}

16


td
{
width:

6em
}

17

</style>

18


<script type =

"text/javascript"
>

19

<!
--

2
0


image1 =
new
Image();


21


image1.src =
"heading1.gif"
;

22


image2 =
new
Image();


23


image2.src =
"heading2.gif"
;

24



Outline

Onmouseoverout

.html


(1 of 8)

Preloads the heading images



2008 Pearson Education,
Inc. All rights reserved.

28

25


function
mouseOver( e )

26

{

27


if
( !e )

28


var
e = window.event;

29


30


var
target = getTarget( e );

31



32

// swap the image when the mouse moves over it

33


if
( target.id ==
"heading"
)

34

{

35


target.src = image2.src;

36


return
;

37

}
// end if

38



39

// if an element's id is defined, assign the id to it
s color

40

// to turn hex code's text the corresponding color

41


if
( target.id )

42


target.style.color = target.id;

43

}
// end function mouseOver

44


45


function
mouseOut( e )

46


{

47


if
( !e )

48


var
e = window.event;

49


50


var
target = getTarget( e );

51



Outline

Onmouseoverout

.html


(2 of 8)

Stores the return value of
getTarget

to variable
target

we can’t use
this

because we have not defined an
event handler for each element in
the document

Changes the heading’s image to
image2

If
target

has a defined
id

(true
of table cells and the heading),
changes its color to that
id



2008 Pearson Education,
Inc. All rights reserved.

29

52

// put the original image back when the mouse moves away

53


if
( target.id ==
"heading"
)

54

{

55


target.src = image1.src;

56


return
;

57

}
// end if

58


59


// if an element's id is defined, assign id to innerHTML

60

// to display the color name

61


if
( target.id )

62


target.innerHTML = target.id;

63

}
// end function mouseOut

64


65


// return either e.srcElement or e.target, whichever exists

66


function
getTarget( e )

67

{

68


if
( e.srcElement )

69


return
e.srcElement;

70


else

71


return
e.target;

72

}
// end function getTarget

73


74


document.onmouseover = mouseOver;

75


document.onmouseout = mouseOut;


76

//
--
>

77

</script>

78

</head>


Outline

Onmouseoverout

.html


(3 of 8)

Replaces
image2

with
image1

If the element’s
id

is
defined, makes the
displayed text equal to the
id

Returns the targeted node in both
Internet Explorer and Firefox

Registers the
onmouseover

and
onmouseout

events in the
document

object



2008 Pearson Education,
Inc. All rights reserved.

30

79

<body>

80


<img src =

"heading1.gif"
id =
"heading"
alt =

"Heading Image"

/>

81


<p>
Can you tell a color from its hexadecimal RGB code

82

value? Look at the hex code, guess its color. To see

83

what color it corresponds to, move the mouse over the

84

hex code. Moving the mouse out of the hex code’s table

85

cell will display the color name.
</p>

86

<table>

87

<tr>

88


<td id =

"Black"
>#000000
</td>

89


<td id =

"Blue"
>#0000FF
</td>

90


<td id =

"Magenta"
>#FF00FF
</td>


91


<td id =

"Gray
">#808080
</td>

92

</tr>

93

<tr>

94


<td id =

"Green"
>#008000
</td>


95


<td id =
"Lime"
>#00FF00
</td>


96


<td id =

"Maroon"
>#800000
</td>

97


<td id =
"Navy"
>#000080
</td>


98

</tr>

99

<tr>

100


<td id =

"Olive"
>#808000
</td>


101


<td id =
"Purple"
>#800080
</td>

102


<td id =

"Red"
>#FF0000
</td>

10
3


<td id =

"Silver"
>#C0C0C0
</td>


104

</tr>


Outline

Onmouseoverout

.html


(4 of 8)



2008 Pearson Education,
Inc. All rights reserved.

31

105

<tr>

106


<td id =

"Cyan"
>#00FFFF
</td>

107


<td id =

"Teal"
>#008080
</td>

108


<td id =

"Yellow"
>#FFFF00
</td>


109


<td id =

"White"
>#FFFFFF
</td>


110

</tr>

111

</table>

112

</body>

113

</html>



Outline

Onmouseoverout

.html


(5 of 8)



2008 Pearson Education,
Inc. All rights reserved.

32



Outline

Onmouseoverout

.html


(6 of 8)



2008 Pearson Education,
Inc. All rights reserved.

33



Outline

Onmouseoverout

.html


(7 of 8)



2008 Pearson Education,
Inc. All rights reserved.

34



Outline

Onmouseoverout

.html


(8 of 8)



2008 Pearson Education, Inc. All rights reserved.

35

Performance Tip 13.1

Preloading images used in rollover effects
prevents a delay the first time an image is
displayed.



2008 Pearson Education, Inc. All rights reserved.

36

13.6 Form Processing with
onfocus

and
onblur


onfocus

event fires when an element gains focus


i.e., when the user clicks a form field or uses the
Tab

key to
move between form elements


onblur

fires when an element loses focus


i.e., when another control gains the focus



2008 Pearson Education,
Inc. All rights reserved.

37


1

<?xml version =
"1.0"
encoding =
"utf
-
8"
?>


2

<!DOCTYPE html PUBLIC
"
-
//W3C//DTD XHTML 1.0 Strict//EN"


3


"http://www.w3.org/TR/xhtml1/DTD/xhtml1
-
strict.dtd"
>


4



5

<!
--
Fig.

13.6: onfocusblur.html
--
>


6

<!
--
Demonstrating the onfocus and onbl
ur events.
--
>


7

<html xmlns =
"http://www.w3.org/1999/xhtml"
>


8

<head>


9

<title>
A Form Using
onfocus and onblur
</title>

10

<style type =
"text/css"
>

11


.tip
{
font
-
family:

sans
-
serif
;

12


color:

blue
;

1
3


font
-
size:

12px
}

14

</style>

15

<script type =
"text/javascript"
>

16


<!
--

17

var
helpArray =

18


[
"Enter your name in this input box."
,
// element 0

19

"Enter your e
-
ma
il address in this input box, "
+

20

"in the format user@domain."
,
// element 1

21

"Check this box if you liked our site."
,
// element 2

22

"In this box, enter any comments you would "
+

23

"l
ike us to read."
,
// element 3

24

"This button submits the form to the "
+

25

"server
-
side script."
,
// element 4

26

"This button clears the form."
,
// element 5

27


""
];
// element 6

28



Outline

onfocusblur.html

(1 of 4)

Array of help messages



2008 Pearson Education,
Inc. All rights reserved.

38

29

function
helpText( messageNum )

30


{

31



document.getElementById(
"tip"
).innerHTML =

32


helpArray[ messageNum ];


33


}
// end function helpText

34


//
--
>

35


</script>

36

</head>

37

<body>

38

<form id =
"myForm"
action =
""
>

39

<div>

40


Name:
<input type =
"text"
name =
"name"


41



onfocus =
"helpText(0)"
onblur =
"helpText(6)"
/><br />

42


E
-
mail:
<input type =
"text"
name =
"e
-
mail"


43




onfocus =
"helpText(1)"
onblur =
"helpText(6)"
/><br />

44


Click here if you like this site

45

<input type =
"checkbox"
name =
"like"
onfocus =

46



"helpText(2)"
onblur =
"helpText(6)"
/><br /><hr />

47


48


Any comments?
<br />

49

<textarea name =
"comments"
rows =
"5"
cols =
"45"


50




onfocus =
"helpText(3)"
onblur =
"helpText(6)"
></textarea>

51

<b
r />

52

<input type =
"submit"
value =
"Submit"
onfocus =

53


"helpText(4)"
onblur =
"helpText(6)"
/>

54

<input type =
"reset"
value =
"Reset"
onfocus =

55


"helpText(5)"
onblur =
"helpText(6)"
/>

56



</div>

57


</form>


Outline

onfocusblur.html

(2 of 4)

Displays the corresponding
help message in the
div

element at the bottom of the
document

When a user clicks into a field,
the
onfocus

event is fired,
which feeds the appropriate
message number to function
helpText

in order to display
the help message

When an element loses
focus, the
onblur

event is
fired, and
helpText(6)

is called, clearing the old
message from the screen



2008 Pearson Education,
Inc. All rights reserved.

39

58


<div id =
"tip"
class =
"tip"
></div>

59


</body>

60

</html>




Outline

onfocusblur.html

(3 of 4)

div

element where the help
message is displayed



2008 Pearson Education,
Inc. All rights reserved.

40




Outline

onfocusblur.html

(4 of 4)



2008 Pearson Education, Inc. All rights reserved.

41

13.7 More Form Processing with
onsubmit

and
onreset


onsubmit

and
onreset

events fire when a form is submitted or
reset, respectively


Anonymous function


A function that is defined with no name


Created in nearly the same way as any other function, but with no identifier after the
keyword
function


Useful when creating a function for the sole purpose of assigning it to an event handler


confirm

method asks the users a question, presenting them with an
OK

button and a
Cancel

button


If the user clicks
OK
,
confirm

returns
true
; otherwise,
confirm

returns
false


By returning either
true

or
false
, event handlers dictate whether
the default action for the event is taken


If an event handler returns
true

or does not return a value, the
default action is taken once the event handler finishes executing



2008 Pearson Education,
Inc. All rights reserved.

42


1

<?xml version =
"1.0"
encoding =
"utf
-
8"
?>


2

<!DOCTYPE html PUBLIC
"
-
//W3C//DTD XHTML 1.0 Strict//EN"


3


"http://www.w3.org/TR/xhtml1/DTD/xhtml1
-
strict.dtd"
>


4



5

<!
--
Fig.

13.7: onsubmitreset.html
--
>


6

<!
--
Demonstrating the onsubmit and o
nreset events.
--
>


7

<html xmlns =
"http://www.w3.org/1999/xhtml"
>


8

<head>


9

<title>
A Form Using
onsubmit and onreset
</title>

10

<style type =
"text/css"
>

11


.tip
{
font
-
family:

sans
-
serif
;

12


color:

blu
e
;

13


font
-
size:

12px
}

14

</style>

15

<script type =
"text/javascript"
>

16


<!
--

17

var
helpArray =

18


[
"Enter your name in this input box."
,

19

"Enter your e
-
mail addr
ess in this input box, "
+

20

"in the format user@domain."
,

21

"Check this box if you liked our site."
,

22

"In this box, enter any comments you would "
+

23

"like us to read."
,

24


"This button submits the form to the "
+

25

"server
-
side script."
,

26

"This button clears the form."
,

27


""
];

28



Outline

Onsubmitreset

.html

(1 of 3)



2008 Pearson Education,
Inc. All rights reserved.

43

29

function
helpText( messageNum )

30


{

31


document.getElementById(
"tip"
).innerHTML =

32

helpArray[ messageNum ];

33

}
// end function helpText

34


35


function
registerEvents()

36

{

37


document.getElementById(
"myForm"
).onsubmit =
function
()

38


{


39





return
confirm(
"Are you sure you want to submit?"
);


40



}
// end anonymous function


41


42


document.getElementById(
"myForm"
).onreset =
function
()

43


{


44





return
confirm(
"Are
you sure you want to reset?"
);


45


}
// end anonymous function


46

}
// end function registerEvents

47


//
--
>

48

</script>

49

</head>

50

<body onload =
"registerEvents()"
>

51

<form id =
"myForm"
action =
""
>

52

<div>

53


Name:
<input type =
"text"
name =
"name"


54


onfocus =
"helpText(0)"
onblur =
"helpText(6)"
/><br />

55


E
-
mail:
<input type =
"text"
name
=
"e
-
mail"


56




onfocus =
"helpText(1)"
onblur =
"helpText(6)"
/><br />

57


Click here if you like this site


Outline

Onsubmitreset

.html

(2 of 3)

Creates an anonymous function
to register as an event handler
for the
onsubmit

event

Uses
confirm

to return a
boolean stating whether or not
the form should be submitted or
reset



2008 Pearson Education,
Inc. All rights reserved.

44

58

<input type =
"checkbox"
name =
"like"
onfocus =

59


"helpText(2)"
onblur =
"helpText(6)"
/><br /><hr />

60


61


Any comments?
<br />

62

<textarea name =
"comments"
rows =
"5"
cols =
"45"


63





onfocus =
"helpText(3)"
onblur =
"helpText(6)"
></textarea>

64

<br />

65

<input type =
"submit"
value =
"Submit"
onfocus =

66


"helpText(4)"
onblur =
"helpText(6)"
/>

67

<input type =
"reset"
value =
"Reset"

onfocus =

68


"helpText(5)"
onblur =
"helpText(6)"
/>

69


</div>

70


</form>

71


<div id =
"tip"
class =
"tip"
></div>

72


</body>

73

</html>



Outline

Onsubmitreset

.html

(3 of 3)



2008 Pearson Education, Inc. All rights reserved.

45

13.8 Event Bubbling


Event bubbling


The process whereby events fired in child elements
“bubble” up to their parent elements


When an event is fired on an element, it is first delivered to
the element’s event handler (if any), then to the parent
element’s event handler (if any)


If you intend to handle an event in a child
element alone, you should cancel the bubbling of
the event in the child element’s event
-
handling
code by using the
cancelBubble

property of
the event object



2008 Pearson Education,
Inc. All rights reserved.

46


1

<?xml version =
"1.0"
encoding =
"utf
-
8"
?>


2

<!DOCTYPE html PUBLIC
"
-
//W3C//DTD XHTML 1.0 Strict//EN"


3


"http://www.w3.org/TR/xhtml1/DTD/xhtml1
-
strict.dtd"
>


4



5

<!
--
Fig.

13.8: bubbling.html
--
>


6

<!
--
Canceling event bubbling.
--
>


7

<ht
ml xmlns =
"http://www.w3.org/1999/xhtml"
>


8

<head>


9


<title>
Event Bubbling
</title>

10


<script type =
"text/javascript"
>

11

<!
--

12


function
documentClick()

13

{

14

alert(
"You clicked in
the document."
);

15

}
// end function documentClick

16


17


function
bubble( e )

18

{

19


if
( !e )

20

var e = window.event;

21



22

alert(
"This will bubble."
)
;

23


e.cancelBubble =
false
;

24

}
// end function bubble

25


26


function
noBubble( e )

27

{

28


if
( !e )

29


var
e = window.event;

30



Outline

bubbling.html

(1 of 3)

Does not cancel bubbling, which
is the default



2008 Pearson Education,
Inc. All rights reserved.

47

31

alert(
"This will not bubble."
);

32


e.cancelBubble =
true
;

33

}
// end function noBubble

34


35


function
registerEvents()

36

{

37


document.onclick = documentClick;



38


document.getElementById(
"bubble"
).onclick = bubble;


39


document.getElementById(
"noBubble"
).onclick = noBubble;

40

}
// end function registerEvents

41

//
--
>

42

</script>

43

</head>

44


<body onload =
"registerEvents()"
>

45


<p id =
"bubble"
>
Bubbling enabled.
</p>

46


<p id =
"noBubble"
>
Bubbling disabled.
</p>

47

</body>

48

</html>



Outline

bubbling.html

(2 of 3)

Cancels event bubbling

Registers events for clicking in
the two
p

elements, which are
children of the
document

object

Registers an event for
the
document

object



2008 Pearson Education,
Inc. All rights reserved.

48



Outline

bubbling.html

(3 of 3)



2008 Pearson Education, Inc. All rights reserved.

49

Common Programming Error 13.5

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



2008 Pearson Education, Inc. All rights reserved.

50

13.9 More Events


The following slide contains a list of some events
supported by both Firefox and Internet Explorer



2008 Pearson Education, Inc. All rights reserved.

51


Event

Description


onabort

Fires when imag
e transfer has been interrupted

by user.


onchange

Fires when a new choice is made in a
select

element, or when a text input is changed and the
element loses focus.


onclick

Fires when the user clicks using the
mouse.


ondblclick

Fires when the mouse is double clicked.


onfocus

Fires when a form element gains focus.


onkeydown

Fires when the user pushes down a key.


onkeypress

Fires when the user presses then releases a key.


onkeyup

Fires when the user rel
eases a key.


onload

Fires when an element and all its children have
loaded.


onsubmit

Fires when a form is submitted.


onunload

Fires when a page is about to unload.


Fig. 13.9

|
Cross
-
browser events. (Part 1 of 2.)



2008 Pearson Education, Inc. All rights reserved.

52


Event

Description


onmousedown

Fires when a mouse button is pressed down.


onmousemove

Fires when the mouse moves.


onmouseout

Fires when the mouse leaves an element.


onmouseover

Fires when t
he mouse enters an element.


onmouseup

Fires when a mouse button is released.


onreset

Fires when a form resets (i.e., the user clicks

a reset button).


onresize

Fires when the size of an object changes

(i.e., the user resizes a window or frame).


onse
lect

Fires when a text selection begins (applies to
input
or
textarea
).


onsubmit

Fires when a form is submitted.


onunload

Fires when a page is about to unload.


Fig. 13.9

|
Cross
-
browser events. (Part 2 of 2.)