Event handlers

Unit 12

Document Object Model

Document Object Model (DOM)

These are some objects in the Document Object Model (DOM).
You can look at the value of these objects. The value is what is in the web page.
You can change the value of some of these objects. Changing the value of the objects changes the web page.

Object
Definition
document
The document is in the BOM, and is the root element in the DOM
document.getElementById("specified id")
returns a reference to the element with the specified id
someElement.id
reference to a child with the specified id

The window object is the default when you are writing JavaScript code. If you code   alert("hello")   You actually get   window.alert("hello")   Everything that looks like it is global in JavaScript actually belongs to the window object.

Sometimes the window and its decendents are refered to as the Browser Object Model (BOM).

Event handlers

sample-1-event-handlers shows different ways to address an element in the DOM.
button 1 uses: var result_area = document.getElementById("result");
getElementById() always works for any element that has an id attribute; this technique is commonly used.

The alternate function for onmouseover is used for button 2.
This function walks down the tree of what element contains what element, from the document, down to the body, down to the div element, down to the input element. Example 5.3 in McDuffie uses a somewhat similar technique, in a simpler case.

sample-2-link-examples shows link examples involving events.
The link from A to B uses a confirm() pop-up.
The link back from B to A uses an image rollover.
The link that goes nowhere from page A has an href value with a javascript: pseudo-protocal that provides the   hello   alert and returns void. The link that goes nowhere also has a onclick that provides the   You clicked this   alert message

Other examples

Other examples are given in unit 10.

Reading assignment

Reading assignments are in the text book, Java Script, A Beginner's Guide, Second Edition, by John Pollock; McGraw Hill / Osborne, ISBN 0-07-222790-7

Review Module 7, which we read in the last assignment.

Alternate reading assignments are in the text book, Java Script Concepts & Techniques Programming Interactive Web Sites, by Tina Spain McDuffie; Franklin, Beedle & Associates, ISBN 1-887902-45-7

Read Chapter 5. Look at this chapter again. This time look at the code in the event handlers. Especially look at the use of the Document Object Model.

Lecture notes

Do NOT read the lecture notes before hearing the lecture. If you do, you will find the lecture very boring. Read the lecture notes if you do not attend the lecture, or if you wish to review the material.