JavaScript and HTML
Simple Event Handling
15-Mar-16
JavaScript and DOM

JavaScript relies on a Document Object Model (DOM)
that describes the structure of the web page


This is not the same as the XML DOM
You can do a lot with a just a little understanding of the
DOM



You use the DOM to access elements on the web page
You can capture events without knowing the DOM at all
You need the DOM to make any changes to the web page
2
Events

Some (but not all) elements on the web page respond to
user interactivity (keystrokes, mouse clicks) by creating
events

Different kinds of elements produce different events



Browsers are not all alike in what events are produced
We will concentrate on events from HTML form elements
and commonly recognized events
You can put handlers on HTML form elements


If the event isn’t generated, the handler does nothing
A handler should be very short

Most handlers call a function to do their work
3
A simple event handler

<form method="post" action="">
<input type="button"
name="myButton"
value="Click me"
onclick="alert('You clicked the button!');">
</form>
 The button is enclosed in a form
 The tag is input type="button"
 The name can be used by other JavaScript code
 The value is what appears on the button
 onclick is the name of the event being handled


The value of the onclick element is the JavaScript code to execute
alert pops up an alert box with the given text
4
Capitalization



JavaScript is case sensitive
HTML is not case sensitive
onclick="alert('You clicked the button!');"



The underlined parts are HTML
The quoted string is JavaScript
You will frequently see onclick capitalized as onClick



The Java naming convention is easier to read
This is fine in HTML, but an error if it occurs in JavaScript
Also note: Since we have a quoted string inside
another quoted string, we need both single and
double quotes
5
Common events

Most HTML elements produce the following events:








onClick -- the form element is clicked
onDblClick -- the form element is clicked twice in close succession
onMouseDown -- the mouse button is pressed while over the form element
onMouseOver -- the mouse is moved over the form element
onMouseOut -- the mouse is moved away from the form element
onMouseUp -- the mouse button is released while over the form element
onMouseMove -- the mouse is moved
In JavaScript, these should be spelled in all lowercase
6
Example: Simple rollover

The following code will make the text Hello
red when the mouse moves over it, and
blue when the mouse moves away
<h1 onMouseOver="style.color='red';"
onMouseOut="style.color='blue';">Hello </h1>

Image rollovers are just as easy:
<img src="../Images/duke.gif"
width="55" height="68"
onMouseOver="src='../Images/duke_wave.gif';"
onMouseOut="src='../Images/duke.gif';">
7
Events and event handlers I

The following tables are taken from:
http://developer.netscape.com/docs/manuals/js/client/
jsguide/index.htm
Event
Load
Applies to
Occurs when
Document body User loads the page
in a browser
Handler
onLoad
Unload
Document body User exits the page
onUnload
Error
Images, window Error on loading an
image or a window
onError
Abort
Images
onAbort
User aborts the
loading of an image
8
Events and event handlers II
Event
Applies to
Occurs when
Handler
KeyDown Documents, images, User depresses onKeyDown
links, text areas
a key
KeyUp
Documents, images, User releases a onKeyUp
links, text areas
key
KeyPress
Documents, images, User presses
onKeyPress
links, text areas
or holds down
a key
Change
Text fields, text
areas, select lists
User changes onChange
the value of an
element
9
Events and event handlers III
Event
Applies to
Occurs when
Handler
MouseDown Documents,
buttons, links
User
onMouseDown
depresses a
mouse button
MouseUp
Documents,
buttons, links
User releases onMouseUp
a mouse
button
Click
Buttons, radio
User clicks a onClick
buttons,
form element
checkboxes,
or link
submit buttons,
reset buttons, links
10
Events and event handlers IV
Event
Applies to
Occurs when
Handler
MouseOver
Links
User moves
cursor over a
link
onMouseOver
MouseOut
Areas, links
User moves
onMouseOut
cursor out of an
image map or
link
Select
Text fields, text
areas
User selects
onSelect
form element’s
input field
11
Events and event handlers V
Event
Applies to
Occurs when
Handler
Move
Windows
User or script
moves a window
onMove
Resize
Windows
User or script
resizes a window
onResize
DragDrop
Windows
User drops an
object onto the
browser window
onDragDrop
12
Events and event handlers VI
Event
Focus
Applies to
Windows and all
form elements
Blur
Windows and all
form elements
Reset
Forms
Submit
Forms
Occurs when
User gives
element input
focus
User moves
focus to some
other element
User clicks a
Reset button
Handler
onFocus
onBlur
onReset
User clicks a onSubmit
Submit button
13
Back to the DOM



You can attach event handlers to HTML elements with very little
knowledge of the DOM
However, to change what is displayed on the page requires
knowledge of how to refer to the various elements
The basic DOM is a W3C standard and is consistent across
various browsers


More complex features are browser-dependent
The highest level element (for the current page) is window, and
everything else descends from that



Every JavaScript variable is a field of some object
In the DOM, all variables are assumed to start with “window.”
All other elements can be reached by working down from there
14
The DOM
hierarchy
Source:
http://sislands.com/coin70/week1/dom.htm
15
Fields of window, I

window


self


If in a frame, the outermost enclosing window.
frames[ ]


If in a frame, the immediately enclosing window.
top


Same as window.
parent


The current window (not usually needed).
An array of frames (if any) within the current window. Frames are
themselves windows.
length

The number of frames contained in this window.
16
Fields of window, II

document


location


The HTML document being displayed in this window.
The URL of the document being displayed in this window. If you set this
property to a new URL, that URL will be loaded into this window. Calling
location.reload() will refresh the window.
navigator

A reference to the Navigator (browser) object. Some properties of
Navigator are:



appName -- the name of the browser, such as "Netscape"
platform -- the computer running the browser, such as "Win32"
status

A read/write string displayed in the status area of the browser window. Can
be changed with a simple assignment statement.
17
Methods of window, I

alert(string)


confirm(string)


Displays an alert dialog box containing the string and an OK
button.
Displays a confirmation box containing the string along with
Cancel and OK buttons. Returns true if OK is pressed, false if
Cancel is pressed.
prompt(string)

Displays a confirmation box containing the string, a text field,
and Cancel and OK buttons. Returns the string entered by the
user if OK is pressed, null if Cancel is pressed.
18
Methods of window, II

open(URL)


Opens a new window containing the document specified by
the URL.
close()

Closes the given window (which should be a top-level
window, not a frame).
19
Fields of document, I


You must prefix these fields with document.
anchors[ ]


An array of Anchor objects (objects representing
<a name=...> tags)
applets[ ]

An array of Applet objects



The properties are the public fields defined in the applet
The methods are the public methods of the applet
Cautions:
 You must supply values of the correct types for the fields
and method parameters
 Changes and method calls are done in a separate Thread
20
Fields of document, II

forms[ ]

An array of Form elements


images[ ]

An array of Image objects


If the document contains only one form, it is forms[0]
To change the image, assign a new URL to the src property
links[ ]

An array of Link objects

A link has several properties, including href, which holds the complete
URL
21
Fields of document, III

bgColor

The background color of the document


title


May be changed at any time
A read-only string containing the title of the document
URL

A read-only string containing the URL of the document
22
Fields of the form object

elements[ ]

An array of form elements
23
The End
24