Essentials for Design JavaScript Level One Michael ... - Kuroski.net

tacitmarigoldInternet και Εφαρμογές Web

25 Ιαν 2014 (πριν από 3 χρόνια και 9 μήνες)

190 εμφανίσεις








Project 8: Reacting to Events

Essentials for Design

JavaScript

Level One

Michael Brooks

Copyright (c) 2004 Prentice
-
Hall. All rights reserved.

2

Objectives


Detect mouse
events


Use events with
the <body> tag


Apply blur and
focus event
handlers

Copyright (c) 2004 Prentice
-
Hall. All rights reserved.

3

Objectives (continued)


Detect keyboard
events


Utilize form events


Apply selection
events


Advanced use of
event handlers

Copyright (c) 2004 Prentice
-
Hall. All rights reserved.

4

Why Would I Do This?



Events are an important part of
object
-
oriented programming


Keywords that allow us to detect
and react to events are called
event handlers


Event handlers are occasionally
referred to as

listeners

in
advanced programming
applications


Copyright (c) 2004 Prentice
-
Hall. All rights reserved.

5

Why Would I Do This?

(continued)


Event handlers are almost always used to
"bind" HTML and JavaScript code together


Using JavaScript event handlers can be used
to trigger actions when certain events are
detected


Most practical uses of JavaScript require the
detection of a specific event such as:


when the user rolls over an image


when a user submits a form

Copyright (c) 2004 Prentice
-
Hall. All rights reserved.

6

Visual Summary



Event handlers are usually used inline with
HTML tags




The onclick event handler appears to be an
HTML attribute of the <p> tag


Example


<p onclick="alert('hi!');">Welcome to my site.</p>

Copyright (c) 2004 Prentice
-
Hall. All rights reserved.

8

Visual Summary (continued)


Event handlers always start with the word
on

followed by the event


This is typical of most object oriented
languages


Event handlers aren't case sensitive when
used inline in HTML

Copyright (c) 2004 Prentice
-
Hall. All rights reserved.

9

Visual Summary (continued)


Event handler statements are typically written
in one of three ways:


Type:




Example

Method




onclick="
alert('hi');
"

User
-
Defined Function


onmouseover="
myFunction();"

Multiple Statements


onkeypress="
window.open(); x=10;
"

Copyright (c) 2004 Prentice
-
Hall. All rights reserved.

10

Visual Summary (continued)


In object oriented languages, events are
tied to particular objects


In JavaScript, event handlers are bound to
HTML tags or the object that represents
the HTML tag


Each HTML tag has a list of event
handlers which it can detect and to which
it can respond

Copyright (c) 2004 Prentice
-
Hall. All rights reserved.

11

Detecting Mouse Events



Events related to the use of a mouse were
among the first event handlers to be added to
JavaScript


Newer versions of JavaScript contain event
handlers to detect such things as the roll of a
mouse wheel

Copyright (c) 2004 Prentice
-
Hall. All rights reserved.

12

Detecting Mouse Events
(continued)



OnClick and Ondblclick


The onclick event fires when an object is clicked


The ondblclick event fires when the user double
clicks the mouse on an object


The onclick and ondblclick event handlers work on
virtually any element that can be displayed on the
screen

Copyright (c) 2004 Prentice
-
Hall. All rights reserved.

13

Detecting Mouse Events
(continued)



OnClick and Ondblclick


The onclick event fires when an object is clicked


The ondblclick event fires when the user double
clicks the mouse on an object


The onclick and ondblclick event handlers work on
virtually any element that can be displayed on the
screen

<img src="mypic.jpg" ondblclick="alert('You double clicked!');">

Copyright (c) 2004 Prentice
-
Hall. All rights reserved.

14

Detecting Mouse Events
(continued)



ONMOUSEDOWN, ONMOUSEMOVE,
ONMOUSEOUT, ONMOUSEOVER


The onmousedown event fires when the user
clicks the mouse on an object


The onmousemove event fires when the mouse
moves while over an element

Copyright (c) 2004 Prentice
-
Hall. All rights reserved.

15

Detecting Mouse Events
(continued)



The onmouseover handler fires when the
mouse initially moves over the edge of an
element


The onmouseout event fires when the user
moves the mouse off of an element

<img src="normal version of the image;"

onmouseover="switch the normal image with a rollover version;"

onmouseout="remove the rollover image and return the original image;"

onmousedown="go to the associated URL;">

Copyright (c) 2004 Prentice
-
Hall. All rights reserved.

16

Detecting Mouse Events
(continued)


Use OnClick


The onclick event fires when an object is
clicked


Example

Copyright (c) 2004 Prentice
-
Hall. All rights reserved.

18

Detecting Mouse Events
(continued)


Detect Double Mouse Clicks


The onclick event fires when an object is
double clicked


Example

Copyright (c) 2004 Prentice
-
Hall. All rights reserved.

20

Detecting Mouse Events
(continued)


Detecting Rollovers


The
onmouseover
event fires when the
mouse initially moves over the edge of an
element


Example


Copyright (c) 2004 Prentice
-
Hall. All rights reserved.

22

Using Events with the <body>
Tag



The <body> tag is a display tag which
represents every item displayed in the
active part of the browser window


Since the <body> tag represents the page that
is displayed, event handlers such as onclick or
onmouseover can be used with the <body> tag


Despite this ability, onclick or onmouseover
rarely have practical applications when used
with the <body>


Copyright (c) 2004 Prentice
-
Hall. All rights reserved.

23

Using Events with the <body>
Tag (continued)


Other event handlers can be used with the
<body> tag which are much more useful


The onload event handler can be used to
trigger events a HTML page has finished
loading into the browser


Copyright (c) 2004 Prentice
-
Hall. All rights reserved.

24

Using Events with the <body>
Tag (continued)


onload


The onload handler fires when the last
character of the HTML page has loaded


This event is typically used with the <body> or
<frameset> tag but may also be attached to:



<applet> tag


<embed> tag


<link> tag


<script> tag



<style> tag

<body onload="alert('The page has finished loading.');">

Copyright (c) 2004 Prentice
-
Hall. All rights reserved.

25

Using Events with the <body>
Tag (continued)


onresize


This handler indicates the page is being resized


This event is typically used with the <body> tag
as in the following example


This event handler opens up all kinds of options
for Web designers


<body onresize="alert('page resized');">

Copyright (c) 2004 Prentice
-
Hall. All rights reserved.

26

Using Events with the <body>
Tag (continued)


onunload


This event:


fires when the browser is leaving the current
document in a window or frame


fires when the reset button is used, since the refresh
button unloads the current document then loads a
new version of the file


can be used with the <body> or <frameset> tag


Example

Copyright (c) 2004 Prentice
-
Hall. All rights reserved.

28

Using Events with the <body>
Tag (continued)


Using Onresize


This handler indicates the page is being resized


This event is typically used with the <body> tag
as in the following example


Example of resizing the current document to a
resolution of 640*480, approximately one
second after the function is invoked

Copyright (c) 2004 Prentice
-
Hall. All rights reserved.

31

Using Events with the <body>
Tag (continued)


Correct Event Detection Issues


If you will try to use self.resizeTo() without



setTimeout() method, you may notice a "jerky"
effect as the window constantly resizes as you
try to resize it because the event is constantly
being detected and acted upon


Example of resizing the current document to a
resolution of 640*480, without the setTimeout()
method

Copyright (c) 2004 Prentice
-
Hall. All rights reserved.

33

Applying Blur and Focus Event
Handlers


The focus() and blur()
methods can also be
used with form
elements


The user can also
create these events
by choosing an
object with the
mouse

Copyright (c) 2004 Prentice
-
Hall. All rights reserved.

34

Applying Blur and Focus Event
Handlers (continued)


If a window or frame has focus, it means
that any keystrokes we type will be directed
to that window


We can give focus to windows in a number
of ways such as:


clicking in or on the window


using the focus() method

Copyright (c) 2004 Prentice
-
Hall. All rights reserved.

35

Applying Blur and Focus Event
Handlers (continued)


The onblur event fires when focus is given to
another window


The onblur event can be used with the following
tags:


<a>


<area>


<body>


<ilayer>


<button>



<input>



<label>


<select>


<textarea>


<applet>


<area>



<
div
>


<object>


<span>


<table>


<td>


Copyright (c) 2004 Prentice
-
Hall. All rights reserved.

36

Applying Blur and Focus Event
Handlers (continued)


The onfocus event fires when the user
chooses the specified window


The onfocus event can be used with the
following tags:


<a>


<applet>


<area>


<button>


<div>,



<embed>


<hr>


<img>


<input>


<label>


<marquee>


<object>


<select>


<table>


<td>


<tr>


<textarea>


Copyright (c) 2004 Prentice
-
Hall. All rights reserved.

38

Applying Blur and Focus Event
Handlers (continued)


Detecting the Blur of a Window Object


The onblur and onfocus events can be used
effectively to stop actions in a window


Example

Copyright (c) 2004 Prentice
-
Hall. All rights reserved.

40

Detecting Keyboard Events


Keyboard events

refer to a group of
events related keys being pressed on the
keyboard


Keyboard events usually fire when the
user either presses or releases a key


Keyboard event handlers offer the
opportunity to create usable experiences
for disabled users who may have difficulty
using a mouse

Copyright (c) 2004 Prentice
-
Hall. All rights reserved.

41

Detecting Keyboard Events
(continued)


ONKEYDOWN, ONKEYPRESS, ONKEYUP


The onkeydown event fires if a key is pressed
while the element has focus


The event fires:


as soon as the user presses the key and the key
doesn't have to be released


no matter which key is pressed

Copyright (c) 2004 Prentice
-
Hall. All rights reserved.

42

Detecting Keyboard Events
(continued)


The onkeypress event fires if a key is pressed
and then released while the element has focus


The event:


doesn't fire until the key is released


fires no matter which key is pressed

Copyright (c) 2004 Prentice
-
Hall. All rights reserved.

43

Detecting Keyboard Events
(continued)


The onkeyup event fires when a key is released
when the element has focus


the event doesn't fire until the key is released

Copyright (c) 2004 Prentice
-
Hall. All rights reserved.

44

Detecting Keyboard Events
(continued)


Detect a Keypress

<html>

<head>

<title>onkeypress.html
-

shows the
onkeypress event handler</title>

</head>

<body>

<p>Press a key while the link below is
active and you will generate an alert
box.</p>

<p><a href="#"
onkeypress="alert('hi!');"
>Welcome
to my site.</a></p>

</body>

</html>

Copyright (c) 2004 Prentice
-
Hall. All rights reserved.

45


Use Form Related Events


Forms offer very practical
uses for various event


Various techniques can
be accomplished by
detecting whether forms
have been submitted or
reset


Copyright (c) 2004 Prentice
-
Hall. All rights reserved.

46

Use Form Related Events
(continued)


onsubmit


The onsubmit handler
indicates that a form is
being submitted, usually by
the press of a submit
button


This event is usually bound
to the <form> tag


Example

Copyright (c) 2004 Prentice
-
Hall. All rights reserved.

48

Use Form Related Events
(continued)


onreset


The onreset handler indicates that a form is
being reset, usually by the press of a reset
button


This event is usually bound to the <form> tag


Example

Copyright (c) 2004 Prentice
-
Hall. All rights reserved.

50

Use Form Related Events
(continued)


Use the OnSubmit
Event Handler


The onsubmit event
handler can be used to
detect when the user is
ready to submit the
contents of the form


Example

Copyright (c) 2004 Prentice
-
Hall. All rights reserved.

52

Use a Selection Event


Event handlers exist which
allow the developer to
determine if text has been
selected or changed


These handlers are usually
used within form elements
for a variety of reasons

Copyright (c) 2004 Prentice
-
Hall. All rights reserved.

53

Use a Selection Event
(continued)


ONSELECT


This event fires when the user selects text in a
form element by highlighting the text


It is available with the <input> and <textarea>
tags


Example


Copyright (c) 2004 Prentice
-
Hall. All rights reserved.

55

Use a Selection Event
(continued)


onchange


The onchange event handler fires when the
user modifies the value or content of an HTML
element in a form:


Select


Input


Text area

then releases the mouse button


This handler is often used to check or confirm
changes made the user

Copyright (c) 2004 Prentice
-
Hall. All rights reserved.

57

Use a Selection Event
(continued)


Detect the Change of a Form Element


The ability to use the onchange event handler
gives developers the ability to know if form
elements have changed


This allows forms to be designed to help with
complicated procedures

Copyright (c) 2004 Prentice
-
Hall. All rights reserved.

59

Advanced Use of Event Handlers


You can also use event handlers outside
of HTML tags by incorporating them
directly into scripts


You can also write code to manually fire
many events in JavaScript without the
event actually occurring


Examples


Copyright (c) 2004 Prentice
-
Hall. All rights reserved.

62

Advanced Use of Event Handlers

(continued)


Returning Information from an Event Handler


When you use the event handler as a method, you
basically set the value of the condition to true, which
allows JavaScript to execute the associated code


You can also set the event to false


this has the effect of keeping the associated code from
executing, even though the event has occurred


Example


Copyright (c) 2004 Prentice
-
Hall. All rights reserved.

64

Advanced Use of Event Handlers

(continued)


Create an Event Handler Using Dot
Syntax


Example