Chapter 5: Event Handlers: - When The Event Occurs Relative To That Tag, The Associated Code Runs

1
Chapter 5: Event Handlers
• An event is some user action occurring inside the

browser that triggers the execution of some
Javascript.
• Events can be simple like mouse movement or
complex like copy-paste procedures.
• Event handler is JavaScript code associated with a
particular event, which is usually in relationship to
a particular part of the document such as form
button.
• We specify events with respect to an HTML tag
– When the event occurs relative to that tag, the associated
code runs
PDF created with pdfFactory trial version www.pdffactory.com

2
Events
• Events are bound often in HTML using various

HTML attributes prefixed with the word “on”
• For example
onClick, onDblClick, onMouseOver, etc.
<a href="http://www.w3.org"
onMouseOver="alert('please stay')">
Visit the W3
</a>
• Note: Event names are attributes to HTML tags

and HTML is not case sensitive. Coders have
often defined HTML event attributes as onClick
rather than the formal name "onclick"

3
Where to Place Event Handlers
• Events are typically used with hyperlink and form

tags
• Hyperlink events
– onClick to react to mouse clicks on the link
– onMouseOver and onMouseOut to react the mouse
pointer moving through the link
• Form fields can have the onClick event
– Buttons, check boxes, selection lists, text area etc.
• Data entry fields also have the onFocus event
• The form also has onSubmit and onReset
events
• Many other events.

4
The onClick Event Handler

<html><body>
<b onClick="window.alert('Hello!');">Hello </b>world
</body></html>
Demo
• Notice that the onClick attribute requires us to use double quotes (" ") around
our JavaScript code, so when we need quote marks for the alert, we use single
quotes (' ') to avoid possible errors.
<html><head>
<script language="JavaScript">
<!—
function hi_and_bye() {
window.alert('Hi!'); window.alert('Bye!');
}
//-->
</script>
<body>
<a href="http://www.yahoo.com"
onClick="hi_and_bye();">Yahoo!</a>
</body></html> Demo

5
Default Action of an HTML Tag

• When a user clicks on a link (<a> tag), the browser loads the page
specified in its HREF attribute. This is the default action caused by a
click event on a link.
• But what happens when you’ve also defined an onClick event handler?
The link should also be executed, but when?
• Consider the following link:
<A HREF="somewhere.html" onClick="doSomething()">
• When clicking the link, the event handler must be executed first. After
this, the default action takes place, i.e. loading the new page. The old
page, including the event handler, is then removed from browser
memory.
• Therefore if the onClick event handler is to be executed, it must be
done before the default action. This has become an important principle
of event handling.
• Therefore, if an event causes both a default action and execution of a
event handling script:
– the event handler script is executed first
– the default action takes place afterwards

6
How To Prevent Default Action

• Consider the following link:
<A HREF="somewhere.html"
onClick="doSomething(); return false">
• The event handler onClick can return a boolean (true
or false), and false means: "don’t take the default
action", i.e. the link "somewhere.html" will never be
opened.
• Basically when an event handler receives a "false"
value, the default action of the associated tag will be
disabled.
• But there are exceptions:
– onUnload does not interpret "return false" because when
an unload event is on-going (e.g. closing a browser window and
therefore unloading something in the window), it can never be
prevented.
– onMouseOver and onMouseOut event handlers just do the
opposite, i.e. “return true” will prevent default actions. We’ll
see an example later.

7
The onMouseOver Event Handler
(and it’s counter-part: onMouseOut)
• A mouse-over event occurs when a viewer moves the mouse cursor
over a text link, linked image, or even plain-text.
• The mouse-over event is handled with the onMouseOver event
handler.
• Example:
<html>
<body>
onMouseOver="window.alert('Don\'t click me');">
Don't Click Me!</a>
<h1 onMouseOver="window.alert('A forbidden Heading');">
A forbidden Heading</h1>
<p onMouseOut="window.alert('Weird Paragraph');">
A weird paragraph.<br>
A weird paragraph.<br>
</body></html>
Demo

8
onMouseOver / onMouseOut Example
• The example displays description of link in the browser
status bar when the mouse moves over the link. Here's the
code for such a link:
onMouseOver="window.status='Link description';
return true;"
onMouseOut="window.status='';return true;">
Go to Yahoo!</a> Demo
• Returning true here performs the same function as
returning false in the onClick link we saw before.
• It tells the browser "don't do whatever you would normally
do".
• Originally when we move the mouse over a link, the link
target URL would be displayed in the status bar.
• Now we want to tell the browser not to do this, we then
return a true value to onMouseOver (and onMouseOut).
• Note that in other event handler, we should “return
false” instead in order to prevent the default action.

9
Rollover Images
• Change the source of a named image on mouse-

over; change it back to the original source on
mouse-out:
<html>
<head>
<title>Simple Rollover</title>
</head>
<body bgcolor="#FFFFFF">
<a href="http://www.yahoo.com/" target="main"
onMouseOver="document.level1.src='level1_on.gif'"
onMouseOut="document.level1.src='level1_off.gif'">
<img src="level1_off.gif" width=78 height=79 border=0
name="level1"></a>
</body>
</html> Demo

10
The onLoad Event Handler

• The load event occurs when a web page finishes loading.
• To handle this event, we use the onLoad event handler in
the <body> tag on a web page.
• With the load event, all tasks will be executed just after the
page finishes the loading process.
• Example:
<html>
<body onLoad="window.alert('Loading
completed');">
<b>Text for the body of the page</b>
</body>
</html>
Demo

11
The onUnload Event Handler

• The unload event occurs when a viewer leaves the current
web page.
• The viewer could leave by clicking a link, typing another
address in the browser, or closing the window.
• The onUnload event handler is placed in the opening
<body> tag as the onLoad handler.
• Example:
<html>
<body onUnload="window.alert('Please come
back later');">
<b>Text for the body of the page</b><br>
<a href="http://www.yahoo.com">Yahoo</a>
</body></html>
Demo

12
The onFocus Event Handler
• The focus event occurs when the viewer gives

focus to a window or a form element on a web
page.
• For instance, a viewer clicking a text input box
(before entering anything) gives that text box the
focus.
• Also, clicking an inactive window and making it
the active window will give the window the focus.
• The event handler used when this event is
onFocus, and it can be used in a form element or
in the opening <body> tag on a web page (for
focus on a window).

13
onFocus Examples
• onFocus in form
<html><body>
<form>
Enter your name:
<input type="text" onFocus="window.alert('Don\'t forget
to capitalize!');">
</form>
</body></html>
Demo
• onFocus in window
<html>
<body onfocus="window.alert('thank you for choosing
this window');">
<h1>Hello 1</h1>
</body>
</html>
Demo

14
The onBlur Event Handler
• The blur event is the opposite of the onFocus

event, and it occurs when the viewer takes the
focus away from a form element or a window.
• The blur event is triggered only when you give
focus to another area, which is the only way the
browser will know you released the focus from the
first area.
• The onBlur event handler can be used in a form
element’s tag or in the opening <body> tag (for
windows).

15
onBlur Example
<html>
<body>
<form>
Give this box focus:<br>
<input type="text"
onBlur="window.alert('Please come back!');">
<br>
Then give this box focus to blur the 1st one:<br>
<input type="text">
</form>
</body>
</html>
Demo

16
The onChange Event Handler
• The change event occurs when a viewer changes

something within a form element.
• For instance, the viewer might change the text in a text box
or make a selection from a select box.
• Example:
<html><body><form>
Are you cool?<br>
<select onChange="window.alert('changed');">
<option selected>Yes</option>
<option>No</option>
<option>Undecided</option>
</select>
</form></body></html>
Demo

17
The onSubmit Event Handler

• The submit event only occurs when the viewer submits a
form on a web page.
• The onSubmit event handler works only with the Form
object, and it is commonly used to validate the form before
it’s sent to the web server.
• Example:
<html><body>
<form onsubmit="window.alert('Thank you');">
What is your name?<br>
<input type="text" name="thename"><br>
<input type="submit">
</form>
</body></html>
Demo

18

19

20

21

22
Event Handlers vs Objects

Event Handler Objects Event Handler Objects
onAbort Image onChange FileUpload
onBlur, Button Select
onFocus Checkbox Text
FileUpload Textarea
Layer onClick Button
Password Document
Radio Checkbox
Reset Link
Select Radio
Submit Reset
Text Submit
Textarea
Window

23
Event Handlers vs Objects (2)

Event Handler Objects Event Handler Objects
onDblClick Area onLoad Image
Document Layer
Link Window
onDragDrop Window onMouseDown Button
onMove onMouseUp Document
onResize Link
onError Image onMouseMove - - -
Window onMouseOut Area
onKeyDown Document Layer
onKeyPress Image Link
onKeyUp Link
Textarea
24
Event Handlers vs Objects (3)
Event Handler Objects

onMouseOver Area
Layer
Link
onReset Form
onSelect Text
Textarea
onSubmit Form
onUnload Window

25
Object vs Event Handlers
Object Event Handlers Object Event Handlers
Window onLoad Layer onLoad
Frame onUnload onBlur
onBlur onFocus
onFocus onMouseOut
onError onMouseOver
onDragDrop Link onClick
onMove onMouseOut
onResize onMouseOver
Document onClick onDblClick
onDblClick onKeyDown
onKeyDown onKeyPress
onKeyPress onKeyUp
onKeyUp onMouseDown
onMouseDown onMouseUp
onMouseUp
26
Object vs Event Handlers (2)
Object Event Handlers
Text onBlur
Image onLoad
onChange
onError
onFocus
onAbort
onSelect
onKeyDown
Textarea onBlur
onKeyPress
onChange
onKeyUp
onFocus
Area onMouseOut
onSelect
onMouseOver
onKeyDown
onDblClick
onKeyPress
Form onReset onKeyUp
onSubmit Password onBlur
onFocus

27
Object vs Event Handlers (3)

Reset onClick
Submit onBlur Object Event Handlers
Radio onFocus FileUpload onBlur
Checkbox onChange
onFocus
Button onClick
onBlur - - - onMouseMove
onFocus
onMouseDown
onMouseUp
Select onBlur
onChange
onFocus

28
An Example on Button Link
• Using Javascript we can use a button to link to a

different URL.
• The general syntax is:
window.location = "http://someplace.com";
• We can use the window.location property with the

onClick event handler inside a button input tag:
<form>
<input type="button" value="Go Searching!"
onClick="window.location='http://www.yahoo.com';">
</form>

29
Example Code
<html><head><title>Button Links</title>
<script language="JavaScript">

</script></head>
<body>
<form>
<input type="button" value="Go Searching!"
onClick="go_to('http://www.yahoo.com');">
<p>
<input type="button" value="HTML Help!"
onClick="go_to('http://www.pageresource.com');">
<p>
<input type="button" value="Some JavaScripts!"
onClick="go_to('http://www.javascriptcity.com');">
</form></body></html>
Demo

Chapter 5: Event Handlers: - When The Event Occurs Relative To That Tag, The Associated Code Runs

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Chapter 5: Event Handlers: - When The Event Occurs Relative To That Tag, The Associated Code Runs

Diunggah oleh

Hak Cipta:

Format Tersedia

1

Chapter 5: Event Handlers

• An event is some user action occurring inside the

PDF created with pdfFactory trial version www.pdffactory.com

• Events are bound often in HTML using various

• Note: Event names are attributes to HTML tags

PDF created with pdfFactory trial version www.pdffactory.com

Where to Place Event Handlers

• Events are typically used with hyperlink and form

PDF created with pdfFactory trial version www.pdffactory.com

The onClick Event Handler

PDF created with pdfFactory trial version www.pdffactory.com

Default Action of an HTML Tag

PDF created with pdfFactory trial version www.pdffactory.com

How To Prevent Default Action

PDF created with pdfFactory trial version www.pdffactory.com

PDF created with pdfFactory trial version www.pdffactory.com

PDF created with pdfFactory trial version www.pdffactory.com

• Change the source of a named image on mouse-

PDF created with pdfFactory trial version www.pdffactory.com

The onLoad Event Handler

PDF created with pdfFactory trial version www.pdffactory.com

The onUnload Event Handler

PDF created with pdfFactory trial version www.pdffactory.com

The onFocus Event Handler

• The focus event occurs when the viewer gives

PDF created with pdfFactory trial version www.pdffactory.com

PDF created with pdfFactory trial version www.pdffactory.com

The onBlur Event Handler

• The blur event is the opposite of the onFocus

PDF created with pdfFactory trial version www.pdffactory.com

PDF created with pdfFactory trial version www.pdffactory.com

The onChange Event Handler

• The change event occurs when a viewer changes

PDF created with pdfFactory trial version www.pdffactory.com

The onSubmit Event Handler

PDF created with pdfFactory trial version www.pdffactory.com

PDF created with pdfFactory trial version www.pdffactory.com

PDF created with pdfFactory trial version www.pdffactory.com

PDF created with pdfFactory trial version www.pdffactory.com

PDF created with pdfFactory trial version www.pdffactory.com

Event Handlers vs Objects

PDF created with pdfFactory trial version www.pdffactory.com

Event Handlers vs Objects (2)

Event Handlers vs Objects (3)

Event Handler Objects

PDF created with pdfFactory trial version www.pdffactory.com

PDF created with pdfFactory trial version www.pdffactory.com

Object vs Event Handlers (3)

PDF created with pdfFactory trial version www.pdffactory.com

An Example on Button Link

• Using Javascript we can use a button to link to a

• We can use the window.location property with the

PDF created with pdfFactory trial version www.pdffactory.com

PDF created with pdfFactory trial version www.pdffactory.com

Anda mungkin juga menyukai