DOM and Events

tacitmarigoldInternet and Web Development

Jan 25, 2014 (3 years and 8 months ago)

215 views

CS346 Javascript
-
7A Events

1

DOM

Document Object Model

and Events

CS346 Javascript
-
7A Events

2

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





CS346 Javascript
-
7A Events

3

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


CS346 Javascript
-
7A Events

4

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







CS346 Javascript
-
7A Events

5

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>



CS346 Javascript
-
7A Events

6

DOM Structure

CS346 Javascript
-
7A Events

7

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"


CS346 Javascript
-
7A Events

8

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>



CS346 Javascript
-
7A Events

9

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?


CS346 Javascript
-
7A Events

10

Ways to access elements


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



CS346 Javascript
-
7A Events

11

Ways to access elements


3. getElementById Method (defined in DOM
1)



Example:




<form action = "">



<input type = "button" id = "pushMe">



</form>




document.getElementById("pushMe")





CS346 Javascript
-
7A Events

12

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++;


CS346 Javascript
-
7A Events

13

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

CS346 Javascript
-
7A Events

14

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


CS346 Javascript
-
7A Events

15

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


CS346 Javascript
-
7A Events

16

Event attributes and their tags

CS346 Javascript
-
7A Events

17

CS346 Javascript
-
7A Events

18

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



CS346 Javascript
-
7A Events

19

Attributes and Tags

CS346 Javascript
-
7A Events

20

Attributes and Tags

DOM 2 Event Model


CS346 Javascript
-
7A Events

21

CS346 Javascript
-
7A Events

22

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

CS346 Javascript
-
7A Events

23

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();” />

CS346 Javascript
-
7A Events

24

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


CS346 Javascript
-
7A Events

25

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.

CS346 Javascript
-
7A Events

26

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

?

CS346 Javascript
-
7A Events

27

Challenge


Can the event handler
determine which button was
clicked?


See radio_click2.html

CS346 Javascript
-
7A Events

28

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

CS346 Javascript
-
7A Events

29

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


CS346 Javascript
-
7A Events

30

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;


}


}


CS346 Javascript
-
7A Events

31

Caution

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

<script type = "text/javascript">

<!
--

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


dom.elements[0].onclick = planeChoice;

// etc

--
>

CS346 Javascript
-
7A Events

32

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



CS346 Javascript
-
7A Events

33

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


CS346 Javascript
-
7A Events

34

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, saving

1. Server time


2. Internet time


CS346 Javascript
-
7A Events

35

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


CS346 Javascript
-
7A Events

36

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


CS346 Javascript
-
7A Events

37

Dynamic Documents with
Javascript


7B


Positioning elements


Absolute
-

absPos.html


Relative


relPos.html


Moving elements


mover.html


Element visibility


showHide.html



CS346 Javascript
-
7A Events

38

Dynamic Documents with
Javascript


Changing color and fonts


dynColor.html


Dynamic content dynValue.html


Stacking elements


stacking.html



CS346 Javascript
-
7A Events

39

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


CS346 Javascript
-
7A Events

40


CS346 Javascript
-
7A Events

41