Ch5 Event Handlers

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/


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"

http://www.w3.org/http://www.pdffactory.com/http://www.pdffactory.com/http://www.w3.org/


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.



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

http://www.yahoo.com/http://www.pdffactory.com/http://www.pdffactory.com/http://www.yahoo.com/


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



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.



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



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.



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



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



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



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).



13/29

13

onFocus Examples

onFocus in form

Enter your name:

Demo

onFocus in window

Hello 1

Demo



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).



15/29

15

onBlur Example

Give this box focus:

Then give this box focus to blur the 1st one:

Demo



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



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



18/29

18



19/29

19



20/29

20



21/29

21



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




23/29

23

Event Handlers vs Objects (2)

Document

Image

Link

Textarea

onKeyDown

onKeyPress

onKeyUp

Image

Window

onError

WindowonDragDrop

onMoveonResize

Area

Document

Link

onDblClick


Area

Layer

Link

onMouseOut

- - -onMouseMove

Button

DocumentLink

onMouseDown

onMouseUp

Image

Layer

Window

onLoad




24/29

24

Event Handlers vs Objects (3)

WindowonUnload

FormonSubmit

Text

Textarea

onSelectFormonReset

Area

Layer

Link

onMouseOver




25/29

26


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



27


27/29

27

Object vs Event Handlers (3)

onBluronChange

onFocus

Select

onClick

onBlur

onFocus

onMouseDown

onMouseUp

Button

onClick

onBlur

onFocus

Reset

Submit

Radio

Checkbox


onMouseMove- - -

onBlur

onChange

onFocus

FileUpload



28


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:


29
http://someplace.com/http://www.yahoo.com/http://www.pdffactory.com/http://www.pdffactory.com/http://www.yahoo.com/http://someplace.com/


29/29

29

Example Code

Button Links

Demo

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/

Documents

Ch5 Event Handlers