CS346 Javascript-7A Events1 DOM Document Object Model and Events

CS346 Javascript-7A Events 1

DOM

Document Object Modeland Events


JavaScript Execution Environment

JavaScript Window object window in which the browser displays

documents largest enclosing referencing environment for

scripts All global variables are properties of Window

Implicitly defined Window properties:

document - a reference to the Document object that the window displays

frames - an array of references to the frames of the document


Each Document object contains

forms - an array of references to the forms of the document Each Form object has an elements

array, which has references to the form’s elements

anchors links images


Document Object Model(DOM)

DOM is an abstract model interface between HTML documents and application

programs—an API

DOM 0 supported by all JavaScript-enabled browsers (no written specification)

DOM 1 released in 1998

DOM 2 the latest approved standard

Nearly completely supported by NS7 IE6’s support is lacking some important things


Example HTML Document

<html xmlns = http://www.w3.org/1999/xhtml”>

<head><title> document to illustrate DOM</title></head>

<body>

<table>

<tr> <th> Breakfast </th> <td>0 </td> <td>1</td> </td>

<tr> <th> Lunch </th> <td> 1 </td> <td> 0 </td> </tr>

</table>

</body>

</htmL>


DOM Structure


Binding to DOM

To support DOM, a language must have a binding to the DOM constructs

JavaScript binding HTML elements -> objects element attributes -> properties

e.g., <input type = "text" name = "address“ />

represented as an object with two properties, type with the values "text" name with the value "address"


How does JS access elements?

3 ways: 1. DOM address 2. Element names 3. getElementById Method (defined in DOM 1)

Example (a document with just one form and one widget):

<form action = ""> <input type = "button" name =

"pushMe“ /> </form>


Ways to access elements

1. DOM address xhtml: <form action = ""> <input type = "button" name =

"pushMe“ /> </form> Javascript:

document.forms[0].element[0]

Advantage: refers to multiple forms and multiple properties by index

Problem: What if the document changes?



2. Element names – element and all of its ancestors (except body) must have name attributes

Example:

<form name = "myForm" action = ""> <!– name not allowed for form --> <input type = "button" name = "pushMe“ /> <!– name allowed here --> </form>

Javascript: document.myForm.pushMe

Problem: XHTML 1.1 spec doesn’t allow the name attribute in the form element but name

attribute is allowed in elements in a form



3. getElementById Method (defined in DOM 1)

Example:

<form action = ""> <input type = "button" id = "pushMe"> </form>

document.getElementById("pushMe")


Checkboxes and Radio buttons

- Checkboxes and radio button have an implicit array, which has their name

<form id = "topGroup"> <input type = "checkbox" name = "toppings" value = "olives" /> ... <input type = "checkbox" name = "toppings" value = "tomatoes" /></form>...var numChecked = 0;var dom = document.getElementById("topGroup");for index = 0; index < dom.toppings.length; index++) if (dom.toppings[index].checked] numChecked++;


Events and Event Handling

An event is a notification that something specific has occurred due to the browser or an action of the browser user

An event handler is a script that is implicitly executed in response to the occurrence of an event

The process of connecting an event handler to an event is called registration

Don’t use document.write in an event

handler, because the output may go on top of the display


Specify events as Tag Attribute in xhtml

Event Tag Attribute blur onblur loses focus change onchange click onclick focus onfocus click or tab load onload load document

mousedown onmousedown mousemove onmousemove

mouseout onmouseout mouseover onmouseover mouseup onmouseup select onselect text or textarea submit onsubmit unload onunload


Some features

The same attribute can appear in several different tags

e.g., The onclick attribute can

be in <a> and <input>

Event attributes and their tags


Event attributes and their tags



Focus

A text element gets focus in three ways:

1. When the user puts the mouse cursor over it and presses the left button

2. When the user tabs to the element

3. By executing the focus method


Attributes and Tags


Attributes and Tags

DOM 2 Event Model



First way to register event handlers

2 ways

1. By assigning the event handler script to an event tag attribute

onclick = "alert('Mouse click!');" onclick = "myHandler();" // for more

than one statement, use a function See load.html


Buttons: to register event handlers

Plain Buttons – use the onclick property – one to one

<input type=“button” name=“freeButton” id = “freeButton” />

Handler:<input type=“button” name=“freeButton” id = “freeButton” onclick = “freeButtonHandler();” />


Many sources-to-one handler

To enable the event handler to recognize the clicked Radio button to the handler, send a parameter to the handler – many to one

e.g., if planeChoice is the name of the

handler and the value of a button is 172, use

onclick = ″planeChoice(172)″

See radio_click.html


Second way to register event handler

Assigning the name of the handler to the event properties of an object

first method: assigning the call to event handler to an attribute

Caution: The event properties of the object must be assigned (instantiated) when accessed.


Can we make radio_click.html smarter?

<form id = "myForm" action = "handler"> <p> <input type = "radio" name = "planeButton“ value = "152“ onclick = "planeChoice(152)" /> Model 152 <br />

</p>

Note: “152” appears 3 times. Can the event handler pick up the user’s choice?

Can we omit onclick = "planeChoice(152)" ?


Challenge

Can the event handler determine which button was clicked?

See radio_click2.html


Accessibility Principle

Option: Variables and Functions can be placed in <head> and <body> Examples 4-xFunction.html

Accessibility Principle: A variable, function, or object must be defined when accessed Example: 4-3FunctionAfter.html getAvg() accessed in head but defined in body


Caution:

If the handler is registered by assigning it to a property of the JavaScript objects var dom = document.getElementById(″myForm″); dom.elements[0].onclick = planeChoice; object.property.property handler_name

This registration must happen AFTER both the handler function and the XHTML form are defined

If this is done for a radio button group, each element of the array must be assigned


Event handler determining which button was clicked

The checked property of a radio button object is used to determine whether a button is clicked

- If the name of the buttons is planeButton

var dom = document.getElementById(″myForm″);

for (var index = 0; index < dom.planeButton.length; index++) { if (dom.planeButton[index].checked) { plane = dom.planeButton[index].value; break; } }


Caution

See the positioning of the following in the example radio_click2.html: at the very end of body

<script type = "text/javascript">


Pros and Con: 2nd way of registering event handler(specifying handlers by assigning them to event properties )

Disadvantage: no way to use parameters Advantages:

1. Keep HTML and JavaScript separate 2. Handler could be changed during use


Handling Events from Textbox and Password Elements

The Focus Event

One use: To prevent illicit changes to a text box by blurring the element every time the element acquires focus

Example: nochange.html


Handling Events from Textbox and Password Elements (cont’d)

Checking Form Input

Good and frequent use of JavaScript finds errors in form input being sent to the

server for processing, saving1. Server time

2. Internet time


How to Check Form Input?

1. Detect the error and produce an alert message

2. Put the element in focus (the focus function)

3. Select the element (the select function)

The focus function puts the element in focus, which puts the cursor in the element

document.getElementById("phone").focus();

The select function highlights the text in the element


Caution:

To keep the form active after the event handler is finished, the handler must return false

- Problems:

1. With IE6, focus and select only work if the handler is registered by assigning it to the element event property

2. With NS7, select works, but focus does not

- Example – password_check.html

More examples in 7A

Radio_click.html Validator.html


Dynamic Documents with Javascript – 7B

Positioning elements Absolute - absPos.html Relative – relPos.html

Moving elements – mover.html Element visibility – showHide.html


Dynamic Documents with Javascript

Changing color and fonts – dynColor.html

Dynamic content dynValue.html Stacking elements – stacking.html


Dynamic Documents with Javascript

Locating the Mouse Cursor – where.html

Reacting to a Mouse Click – anywhere.html

Slow Movement of Elements Recursive call – moveTtxt.html

Dragging and Dropping ElementsdragNDrop.html