event propaga

8/7/2019 Event Propaga

1/41

5.2 DOM History and Levels

Very simple DOM was part of Netscape 2.0 Netscape 3.0 Modify images, rollover effect

Starting with Netscape 4.0 and IE 4.0, browser

DOM APIs differ significantly

W3C responded quickly with DOM Level 1 (Oct

1998) and subsequently DOM Level 2

DOM level 1 two modules:

Core DOM

HTML DOM 1


2/41

Core DOM specifies functionality designed to be

used with any XML document

HTML DOM specifies access to HTML document

Level 2 DOM contains both core and HTML with

events and styles extends level 1 functionality

Level 3 DOM browser support is still evolving

DOM applies to XML documents as well as to HTML

documents

DOM used by standalone applications(JAVA)

Used by scripts running within the browser2


3/41

This chapter focus on: JavaScript API access to

DOM2 of an HTML document + some coverage

of browser specifics

There are 6 w3C recommendations that

collectively define DOM Level 2

This chapter covers four:

DOM 2 Core

Events

Style

HTML 3


4/41

5.3 Intrinsic Event Handling

Browser- based Java script programs are event

driven

JavaScript functions are not called directly from the

top level of a java script programs

Functions are called in response to various user

actions

Clicking a button

Moving mouse over certain element

Rollover program example for event-driven program

structure 4


5/41

An event in a browser is an occurance of

potential interest.

Ex: mouseover and mouseout events

An HTML intrinsic event attribute is used to

specify a script to be called when an event

occurs

Ex: onmouseover

Name of attribute is on followed by event

name

5


6/41

Intrinsic Event Handling

6


7/41

Intrinsic Event Handling

7


8/41

When using intrinsic event use meta element in the head

of the document

Intrinsic event attribute value is a script; what language

is it written in?

HTTP Content-Script-Type header field specifies default

scripting language

meta element allows document to specify values as if

they were header fields

8

Header field name Header field value


9/41

Example HTML document calls window.alert in

response to variety of events

9


10/41

5.4 Modifying Element Style

Change

background colorof element

containing cursor

10

DOM access to change the style of an HTML document element in

response to user-initiated event

Example

Simple navigation bar consisting of a table of links

Using java script and DOM it is simple to change the appearance of

items in the navbar as the mouse moves over them


11/41

11

Java script function called

highlight

called when the cursor enters the region of the screen

occupied by the td element

lowlight

called when the cursor exits the region

These functions change the background color of the td

element

Like rollover, style needs to be modified

both when entering and exiting the element.


12/41

12

Each of functions passed the argument this.

this is a reference to the object on which the method is called

this is a java script object representing the HTML element (td element)

td element has number of properties includes style property itself an

object

The style object defined in DOM 2

Reference to Element instance

representing the td element

Reference to Element instance

Properties ofstyle object

correspond to CSS style properties ofthe corresponding HTML element.


13/41

Alternative syntax (not supported in IE6):

The style object provides a setProperty() method that

can be used to modify style properties using their CSS

property names

Advantage ofsetProperty()

Makes it clear that a CSS property is being set rather than

merely a property of the style object

Allows CSS property names to be used as it is rather than

requiring modification (which can potentially cause confusion)

13

CSS property

name(unmodified)

CSS propertyvalue

Empty string

or

important


14/41

5.5 Document Tree

Recall that HTML document elementsform a tree structure, e.g.,

DOM allows scripts to access and modifythe document tree

14

Root of the document tree

Child Elements


15/41

5.5.1 Node Object

The document tree accessible to Java script programs run

within a DOM2-browser

There are many types of nodes in the DOM document tree,

representing elements, text, comments, the document type

declaration, etc.

The DOM is defined by standard properties and methods.

Properties are often referred to as something that is (i.e. the name of a

node).

Methods are often referred to as something that is done (i.e. remove anode).

Every Object in the DOM document tree has properties and

methods defined by the Node host object15


16/41

A part of the node tree and the relationship

between the nodes

16


17/41

Example HTML fragment

17


18/41

In the HTML DOM, each node is an object.

Objects have methods and properties that canbe accessed and manipulated by JavaScript.

Three important node properties are:

nodeName

nodeValue

nodeType

18


19/41

Document Tree: Node

19


20/41

Jackson, Web Technologies: A Computer Science Perspective, 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0

Document Tree: Node

20


21/41


Document Tree: Node

21


22/41

22

Example HTML document

The Element instance representing the html element

of a document is stored in documentElement property

of the document object

Use Node methods to walk through the document tree

in order to obtain information about the tree

Java script used to produce an outline representation

of the Element nodes contained in a document tree


23/41


23



24/41

String produced by TreeOutline():

24


25/41

25

Depth in tree

Java Script Program forList reordering


26/41

5.5.2 Example List Reordering

Example tree modifying methods used

removeChild(Node) refer slide 21

To display a list in the browser that can be

reordered by the user If the user clicks on the list item, then it will be

swapped with the item below it in the list

Java script function is written switchItems()

Function called from the onclick attribute of each li

element in the list


27/41

Two steps

Search through the linked list of nodes to find thesiblings of the node corresponding to the list item

that was clicked

Perform search by using nextSibling property

until find the node for the list item following

the one clicked

Remove the node for the list item following the

one clicked and reinsert before the node which is

clicked


28/41

5.5.3 The document Node

The document object itself is considered to be a Dom

tree node

html element is the root of HTML document

In DOM the document object is treated as the root of

the node tree

Also treated as the parent of html Element instance useful document properties

title, body, getElementById(string),

getElementByTagName(string),


29/41

29

5.5.4 The Element Node

Nodes of type ELEMENT_NODE are instances of the

Element host object

Some methods of Element are

getAttribute(String)

setAttribute(String, String)

hasAttribute(String)

5.5.5 The Text Node Instances of the Text DOM object used to represent

character data

Node type for these elements is Node.TEXT_NODE


30/41

30

5.5.6 Example Collapsible Elements

Use of document, Element, and text properties and methods

Function written to make elements of a web page collapsible.

This shows a web page before a collapse button is clicked

And shows a page after the expand button is clicked

Two java script function

makeCollapsible()

toggleVisibility()


31/41

31

5.5.6 HTML Convenience Properties

DOMs HTML module defines a number of convenience

properties used to set and retrieve element attribute values

without calling setAttribute() and getAttribute()

Consider the two statement

element.setAttribute(id, element3);

element.id =element3;

First statement is recommended

Clear to say accessing HTML attributes

Special cases the statement two cannot be used

Element.class class is a reserve word in javascript


32/41

5.6 DOM Event Handling

In this the code is executed in mozilla 1.4

Much of it will not work in IE6 Note: IE6 has a different event model

5.6.1 The Event Object and Event Listeners

When an event occurs , an instance of a host object

named Event is created. Event instance created for each event

Event instance contains information about the event:

type: name of event (click, mouseover, etc.)

target: Node corresponding to document element thatgenerated the event (e.g., button element for click, img

for mouseover). This is the event target.

Event instance properties

32


33/41

Once an event instance is created, it is sent to

certain event listeners.

Event listener is simply a function that takes a

single argument that is an instance of event

JavaScript event listener: function that is called with

Event instance when a certain event occurs

An event listener is associated with a target

element by calling addEventListener() on the

element

33


34/41

Example

34

Document contains an element with an id of msgbutton

Java script is executed whenever the mouse is clicked on

the msgButton element and alert box is displayed

Many of the DOM2 event type same as HTML intrinsic event

No DOM2 double-click event

Event

targetEvent type

Definition ofevent

handler

Event handler

Event instance


35/41

OUTPUT

35


36/41

Event instances associated with six DOM2

mouse events

Click, mousedown, mouseup, mousemove,

mouseover, mouseout

Detail property can be used to detect adouble-click event

A double click is represented by an Event

instance with a type of click and a detail value

of 2 All HTML intrinsic events except keypress,

keydown, keyup, and dblclick

36

5.6 Mouse Events


37/41

DOM Event Handling:

Mouse Events

37


38/41

DOM Event Handling:

Mouse Events

Example: mouse trail

38


39/41

HTML document:

JavaScript init() function:

Create

blips

Add event

listener

String uniquelyidentifying this div

Style sheet for blips:

d Di ()


40/41

Event handlerupdateDivs():

Convert mouse location

from Number to String

and append units

Mod (remainder) operator

used to cycle through blip divs

(least-recently changed is thenext div moved)


41/41

Also has some others that are typically

targeted at the window object


41

event propaga

Documents