event propaga
Post on 08-Apr-2018
226 Views
Preview:
TRANSCRIPT
-
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
-
8/7/2019 Event Propaga
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
-
8/7/2019 Event Propaga
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
-
8/7/2019 Event Propaga
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
-
8/7/2019 Event Propaga
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
-
8/7/2019 Event Propaga
6/41
Intrinsic Event Handling
6
-
8/7/2019 Event Propaga
7/41
Intrinsic Event Handling
7
-
8/7/2019 Event Propaga
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
-
8/7/2019 Event Propaga
9/41
Example HTML document calls window.alert in
response to variety of events
9
-
8/7/2019 Event Propaga
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
-
8/7/2019 Event Propaga
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.
-
8/7/2019 Event Propaga
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.
-
8/7/2019 Event Propaga
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
-
8/7/2019 Event Propaga
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
-
8/7/2019 Event Propaga
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
-
8/7/2019 Event Propaga
16/41
A part of the node tree and the relationship
between the nodes
16
-
8/7/2019 Event Propaga
17/41
Example HTML fragment
17
-
8/7/2019 Event Propaga
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
-
8/7/2019 Event Propaga
19/41
Document Tree: Node
19
-
8/7/2019 Event Propaga
20/41
Jackson, Web Technologies: A Computer Science Perspective, 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
Document Tree: Node
20
-
8/7/2019 Event Propaga
21/41
Jackson, Web Technologies: A Computer Science Perspective, 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
Document Tree: Node
21
-
8/7/2019 Event Propaga
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
-
8/7/2019 Event Propaga
23/41
Example HTML document
23
Example HTML document
-
8/7/2019 Event Propaga
24/41
String produced by TreeOutline():
24
-
8/7/2019 Event Propaga
25/41
25
Depth in tree
Java Script Program forList reordering
-
8/7/2019 Event Propaga
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
-
8/7/2019 Event Propaga
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
-
8/7/2019 Event Propaga
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),
-
8/7/2019 Event Propaga
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
-
8/7/2019 Event Propaga
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()
-
8/7/2019 Event Propaga
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
-
8/7/2019 Event Propaga
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
-
8/7/2019 Event Propaga
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
-
8/7/2019 Event Propaga
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
-
8/7/2019 Event Propaga
35/41
OUTPUT
35
-
8/7/2019 Event Propaga
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
-
8/7/2019 Event Propaga
37/41
DOM Event Handling:
Mouse Events
37
-
8/7/2019 Event Propaga
38/41
DOM Event Handling:
Mouse Events
Example: mouse trail
38
-
8/7/2019 Event Propaga
39/41
HTML document:
JavaScript init() function:
Create
blips
Add event
listener
String uniquelyidentifying this div
Style sheet for blips:
d Di ()
-
8/7/2019 Event Propaga
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)
-
8/7/2019 Event Propaga
41/41
Also has some others that are typically
targeted at the window object
Jackson, Web Technologies: A Computer Science Perspective, 2007 Prentice-Hall, Inc. All rights reserved. 0-13-185603-0
41
top related