1. JavaScript and HTML
Simple Event Handling
11-May-18

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

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

4. 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
method tells how to send the form data; action tells where to send it
The tag is input with attribute 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

5. Capitalization JavaScript is case sensitive HTML is not case sensitive
onclick="alert('You clicked the button!');"
The red 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

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

7. 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';">

8. Events and event handlers I
The following tables are taken from: jsguide/index.htm
Event
Applies to
Occurs when
Handler
Load
Document body
User loads the page in a browser
onLoad
Unload
User exits the page
onUnload
Error
Images, window
Error on loading an image or a window
onError
Abort
Images
User aborts the loading of an image
onAbort

9. Events and event handlers II
Applies to
Occurs when
Handler
KeyDown
Documents, images, links, text areas
User depresses a key
onKeyDown
KeyUp
User releases a key
onKeyUp
KeyPress
User presses or holds down a key
onKeyPress
Change
Text fields, text areas, select lists
User changes the value of an element
onChange

10. Events and event handlers III
Applies to
Occurs when
Handler
MouseDown
Documents, buttons, links
User depresses a mouse button
onMouseDown
MouseUp
User releases a mouse button
onMouseUp
Click
Buttons, radio buttons, checkboxes, submit buttons, reset buttons, links
User clicks a form element or link
onClick

11. Events and event handlers IV
Applies to
Occurs when
Handler
MouseOver
Links
User moves cursor over a link
onMouseOver
MouseOut
Areas, links
User moves cursor out of an image map or link
onMouseOut
Select
Text fields, text areas
User selects form element’s input field
onSelect

12. Events and event handlers V
Applies to
Occurs when
Handler
Move
Windows
User or script moves a window
onMove
Resize
User or script resizes a window
onResize
DragDrop
User drops an object onto the browser window
onDragDrop

13. Events and event handlers VI
Applies to
Occurs when
Handler
Focus
Windows and all form elements
User gives element input focus
onFocus
Blur
User moves focus to some other element
onBlur
Reset
Forms
User clicks a Reset button
onReset
Submit
User clicks a Submit button
onSubmit

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

15. The DOM hierarchy
Source:

16. Fields of window, I window self parent top frames[ ] length
The current window (not usually needed).
self
Same as window.
parent
If in a frame, the immediately enclosing window.
top
If in a frame, the outermost enclosing window.
frames[ ]
An array of frames (if any) within the current window. Frames are themselves windows.
length
The number of frames contained in this window.

17. Fields of window, II document location navigator status
The HTML document being displayed in this window.
location
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.

18. Methods of window, I alert(string) confirm(string) prompt(string)
Displays an alert dialog box containing the string and an OK button.
confirm(string)
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.

19. Methods of window, II open(URL) close()
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).

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

21. Fields of document, II forms[ ] images[ ] links[ ]
An array of Form elements
If the document contains only one form, it is forms[0]
images[ ]
An array of Image objects
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

22. Fields of document, III bgColor title URL
The background color of the document
May be changed at any time
title
A read-only string containing the title of the document
URL
A read-only string containing the URL of the document

23. Fields of the form object
elements[ ]
An array of form elements

24. The End