8/6/2019 Ch5 Event Handlers
1/29
1
Chapter 5: Event Handlers
An eventis 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
http://www.pdffactory.com/http://www.pdffactory.com/8/6/2019 Ch5 Event Handlers
2/29
2
Events
Events are bound often in HTML using various
HTML attributes prefixed with the word on
For example
onClick, onDblClick, onMouseOver, etc.
Visit the W3
Note: Event names are attributes to HTML tagsand HTML is not case sensitive. Coders haveoften defined HTML event attributes as onClickrather than the formal name "onclick"
PDF created with pdfFactory trial version www.pdffactory.com
http://www.w3.org/http://www.pdffactory.com/http://www.pdffactory.com/http://www.w3.org/8/6/2019 Ch5 Event Handlers
3/29
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 onResetevents
Many other events.
PDF created with pdfFactory trial version www.pdffactory.com
http://www.pdffactory.com/http://www.pdffactory.com/8/6/2019 Ch5 Event Handlers
4/29
4
The onClick Event Handler
Hello world
Demo
Notice that the onClick attribute requires us to use double quotes (" ") aroundour JavaScript code, so when we need quote marks for the alert, we use singlequotes (' ') to avoid possible errors.
function hi_and_bye() {
window.alert('Hi!'); window.alert('Bye!');
}
//-->
Yahoo!
Demo
PDF created with pdfFactory trial version www.pdffactory.com
http://www.yahoo.com/http://www.pdffactory.com/http://www.pdffactory.com/http://www.yahoo.com/8/6/2019 Ch5 Event Handlers
5/29
5
Default Action of an HTML Tag
When a user clicks on a link ( tag), the browser loads the page
specified in its HREF attribute. This is the default action caused by aclick event on a link.
But what happens when youve also defined an onClick event handler?The link should also be executed, but when?
Consider the following link:
When clicking the link, the event handler mustbe executed first. Afterthis, the default action takes place, i.e. loading the new page. The oldpage, including the event handler, is then removed from browsermemory.
Therefore if the onClick event handler is to be executed, it must bedone before the default action. This has become an important principleof event handling.
Therefore, if an event causes both a default action and execution of aevent handling script:
the event handler script is executed first
the default action takes place afterwards
PDF created with pdfFactory trial version www.pdffactory.com
http://www.pdffactory.com/http://www.pdffactory.com/8/6/2019 Ch5 Event Handlers
6/29
6
How To Prevent Default Action
Consider the following link:
The event handler onClick can return a boolean (trueor false), and false means: "dont take the defaultaction", i.e. the link "somewhere.html" will never beopened.
Basically when an event handler receives a "false"value, the default action of the associated tag will bedisabled.
But there are exceptions: onUnload does not interpret "return false" because when
an unload event is on-going (e.g. closing a browser window andtherefore 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. Wellsee an example later.
PDF created with pdfFactory trial version www.pdffactory.com
http://www.pdffactory.com/http://www.pdffactory.com/8/6/2019 Ch5 Event Handlers
7/29
7The onMouseOver Event Handler
(and its 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:
Don't Click Me!
A forbidden Heading
A weird paragraph.
A weird paragraph.
Demo
PDF created with pdfFactory trial version www.pdffactory.com
http://www.yahoo.com/http://www.pdffactory.com/http://www.pdffactory.com/http://www.yahoo.com/8/6/2019 Ch5 Event Handlers
8/29
8
onMouseOver / onMouseOut Example
The example displays description of link in the browserstatus bar when the mouse moves over the link. Here's the
code for such a link:
Go to Yahoo! Demo
Returning true here performs the same function asreturning false in the onClick link we saw before.
It tells the browser "don't do whatever you would normallydo".
Originally when we move the mouse over a link, the linktarget URL would be displayed in the status bar.
Now we want to tell the browser not to do this, we thenreturn a true value to onMouseOver (and onMouseOut).
Note that in other event handler, we should returnfalse instead in order to prevent the default action.
PDF created with pdfFactory trial version www.pdffactory.com
http://www.yahoo.com/http://www.pdffactory.com/http://www.pdffactory.com/http://www.yahoo.com/8/6/2019 Ch5 Event Handlers
9/29
9
Rollover Images
Change the source of a named image on mouse-
over; change it back to the original source on
mouse-out:
Simple Rollover
Demo
PDF created with pdfFactory trial version www.pdffactory.com
http://www.yahoo.com/http://www.pdffactory.com/http://www.pdffactory.com/http://www.yahoo.com/8/6/2019 Ch5 Event Handlers
10/29
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 inthe tag on a web page.
With the load event, all tasks will be executed just after thepage finishes the loading process.
Example:
Text for the body of the page
Demo
PDF created with pdfFactory trial version www.pdffactory.com
http://www.pdffactory.com/http://www.pdffactory.com/8/6/2019 Ch5 Event Handlers
11/29
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 tag as the onLoad handler.
Example:
Text for the body of the page
Yahoo
Demo
PDF created with pdfFactory trial version www.pdffactory.com
http://www.yahoo.com/http://www.pdffactory.com/http://www.pdffactory.com/http://www.yahoo.com/8/6/2019 Ch5 Event Handlers
12/29
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 orin the opening tag on a web page (for
focus on a window).
PDF created with pdfFactory trial version www.pdffactory.com
http://www.pdffactory.com/http://www.pdffactory.com/8/6/2019 Ch5 Event Handlers
13/29
13
onFocus Examples
onFocus in form
Enter your name:
Demo
onFocus in window
Hello 1
Demo
PDF created with pdfFactory trial version www.pdffactory.com
http://www.pdffactory.com/http://www.pdffactory.com/8/6/2019 Ch5 Event Handlers
14/29
14
The onBlur Event Handler
The blur event is the opposite of the onFocus
event, and it occurs when the viewer takes thefocus 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 thefirst area.
The onBlur event handler can be used in a form
elements tag or in the opening tag (for
windows).
PDF created with pdfFactory trial version www.pdffactory.com
http://www.pdffactory.com/http://www.pdffactory.com/8/6/2019 Ch5 Event Handlers
15/29
15
onBlur Example
Give this box focus:
Then give this box focus to blur the 1st one:
Demo
PDF created with pdfFactory trial version www.pdffactory.com
http://www.pdffactory.com/http://www.pdffactory.com/8/6/2019 Ch5 Event Handlers
16/29
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:
Are you cool?
Yes
No
Undecided
Demo
PDF created with pdfFactory trial version www.pdffactory.com
http://www.pdffactory.com/http://www.pdffactory.com/8/6/2019 Ch5 Event Handlers
17/29
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 beforeits sent to the web server.
Example:
What is your name?
Demo
PDF created with pdfFactory trial version www.pdffactory.com
http://www.pdffactory.com/http://www.pdffactory.com/8/6/2019 Ch5 Event Handlers
18/29
18
PDF created with pdfFactory trial version www.pdffactory.com
http://www.pdffactory.com/http://www.pdffactory.com/8/6/2019 Ch5 Event Handlers
19/29
19
PDF created with pdfFactory trial version www.pdffactory.com
http://www.pdffactory.com/http://www.pdffactory.com/8/6/2019 Ch5 Event Handlers
20/29
20
PDF created with pdfFactory trial version www.pdffactory.com
http://www.pdffactory.com/http://www.pdffactory.com/8/6/2019 Ch5 Event Handlers
21/29
21
PDF created with pdfFactory trial version www.pdffactory.com
http://www.pdffactory.com/http://www.pdffactory.com/8/6/2019 Ch5 Event Handlers
22/29
22
Event Handlers vs Objects
Button
Checkbox
FileUpload
Layer
Password
Radio
Reset
Select
Submit
Text
Textarea
Window
onBlur,
onFocus
ImageonAbort
ObjectsEvent Handler
Button
DocumentCheckbox
Link
Radio
Reset
Submit
onClick
FileUpload
Select
Text
Textarea
onChange
ObjectsEvent Handler
PDF created with pdfFactory trial version www.pdffactory.com
http://www.pdffactory.com/http://www.pdffactory.com/8/6/2019 Ch5 Event Handlers
23/29
23
Event Handlers vs Objects (2)
Document
Image
Link
Textarea
onKeyDown
onKeyPress
onKeyUp
Image
Window
onError
WindowonDragDrop
onMoveonResize
Area
Document
Link
onDblClick
ObjectsEvent Handler
Area
Layer
Link
onMouseOut
- - -onMouseMove
Button
DocumentLink
onMouseDown
onMouseUp
Image
Layer
Window
onLoad
ObjectsEvent Handler
PDF created with pdfFactory trial version www.pdffactory.com
http://www.pdffactory.com/http://www.pdffactory.com/8/6/2019 Ch5 Event Handlers
24/29
24
Event Handlers vs Objects (3)
WindowonUnload
FormonSubmit
Text
Textarea
onSelectFormonReset
Area
Layer
Link
onMouseOver
ObjectsEvent Handler
PDF created with pdfFactory trial version www.pdffactory.com
http://www.pdffactory.com/http://www.pdffactory.com/8/6/2019 Ch5 Event Handlers
25/29
26
8/6/2019 Ch5 Event Handlers
26/29
26
Object vs Event Handlers (2)
onReset
onSubmit
Form
onMouseOut
onMouseOver
onDblClick
Area
onLoad
onError
onAbort
onKeyDown
onKeyPress
onKeyUp
Image
Event HandlersObject
onBlur
onFocus
Password
onBlur
onChangeonFocus
onSelect
onKeyDown
onKeyPress
onKeyUp
Textarea
onBluronChange
onFocus
onSelect
Text
Event HandlersObject
PDF created with pdfFactory trial version www.pdffactory.com
27
http://www.pdffactory.com/http://www.pdffactory.com/8/6/2019 Ch5 Event Handlers
27/29
27
Object vs Event Handlers (3)
onBluronChange
onFocus
Select
onClick
onBlur
onFocus
onMouseDown
onMouseUp
Button
onClick
onBlur
onFocus
Reset
Submit
Radio
Checkbox
Event HandlersObject
onMouseMove- - -
onBlur
onChange
onFocus
FileUpload
Event HandlersObject
PDF created with pdfFactory trial version www.pdffactory.com
28
http://www.pdffactory.com/http://www.pdffactory.com/8/6/2019 Ch5 Event Handlers
28/29
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 theonClick event handler inside a button input tag:
PDF created with pdfFactory trial version www.pdffactory.com
29
http://someplace.com/http://www.yahoo.com/http://www.pdffactory.com/http://www.pdffactory.com/http://www.yahoo.com/http://someplace.com/8/6/2019 Ch5 Event Handlers
29/29
29
Example Code
Button Links
Demo
PDF created with pdfFactory trial version www.pdffactory.com
http://www.yahoo.com/http://www.pageresource.com/http://www.javascriptcity.com/http://www.pdffactory.com/http://www.pdffactory.com/http://www.javascriptcity.com/http://www.pageresource.com/http://www.yahoo.com/