JavaScript DOM and Event Handling Explained in 40 Characters

UNIT-2: JavaScript and XHTML Document
The JavaScript Execution Environment
 A browser displays an XHTML document in a window on
the screen of the client. The JavaScript Window object
represents the window that displays the document.
 All JavaScript variables are properties of some object. The
properties of the Window object are visible to all
JavaScript scripts that appear in the window’s XHTML
document.
 There can be more than one Window object. However, we
deal only with scripts with a single Window object.

 The JavaScript Document object represents the displayed
XHTML document. Every Window object has a property
named document, which is a reference to the Document
object that the window displays.
 Every Document object has a forms array, each element of
which represents a form in the document. Each Forms
array element has an elements array as a property, which
contains the objects that represent the XHTML form
elements, such as buttons and menus.
 The JavaScript objects associated with the elements in a
document can be addressed in a script in several ways.
 Document objects also have property arrays for anchors,
links, images, and applets.

The Document Object Model
 The Document Object Model (DOM) has been under
development by the W3C. At the time of this writing, DOM 2
was the latest approved version, and DOM 3 was under
development.
 The original motivation for the standard DOM was to provide a
mapping of the web documents into the object in all browsers.
These objects are accessible by the JavaScript.
 DOM 0 is the name often used to describe the document model
used by the early browsers that supported JavaScript.
Specifically, DOM 0 is the version of the document model
implemented in the Netscape 3.0 and Internet Explorer 3.0
browsers. The DOM 0 model was partially documented in the
HTML 4 specification.
 DOM 1, the first W3C DOM specification, issued in October
1998, focused on the XHTML and XML document model.

 DOM 2, issued in November 2000, specifies a style sheet
object model and defines how style information attached to a
document can be manipulated. It also includes document
traversals and provides a complete and comprehensive event
model.
 DOM 3 will deal with content models for XML (DTDs and
schemas), document validation, and document views and
formatting, as well as key events and event groups.
 The DOM is an application programming interface (API) that
defines an interface between XHTML documents and
application programs.
 Each language that interfaces with the DOM must define a
binding to that interface. The actual DOM specification
consists of a collection of interfaces, including one for each
document tree node type.
 Documents in the DOM have a treelike structure, but there
can be more than one tree in a document. Therefore, in an
implementation, the relationships among the elements of a
document can be represented in any number of different
ways.

The following XHTML document and its corresponding
DOM tree illustrate the relationship between them.
html xmlns = “http://www.w3.org/1999/xhtml” >
<head> <title>A Simple Document </title> </head>
<body>
<table>
<tr>
<th>Breakfast</th>
<td>0</td>
<td>1</td>
</tr>
<tr>
<th>Lunch</th>
<td>1</td>
<td>0</td>
</tr>
</table>
</body>
</html>

Document
<head>
<body>
A simple
document
<title>
<tr>
<table>
<tr>
<td><td><th> <th> <td> <td>
Breakfast
0 0 0 0
Breakfast

 In the JavaScript binding to the DOM, the elements of
a document are objects, with both data and
operations. The data are called properties, and the
operations are, called methods. For example, the
following element would be represented as an object
with two properties, type and name, with the values
"text" and "address", respectively:
<input type = "text" name = "address">
 In most cases, the property names in JavaScript are the
same as their corresponding attribute names in
XHTML.

Element Access in JavaScript
 There are several ways the object associated with an XHTML
form element can be addressed (accessed) in JavaScript.
 Method-1 (Using forms and elements array): The
original (DOM 0) way is to use the forms and elements
arrays of the Document object, which is referenced through
the document property of the Window object.
 For example, consider the following XHTML document:
<html xmlns = "http://www.w3.org/1999/xhtml">
<head> <title> Access to form elements </title> </head>
<body>
<form action = "">
<input type = "button" name = "turnIton" />
</form>
</body>
</html>

 The DOM address of the button using the forms and
elements arrays, is as follows:
var dom = document.forms[0].elements[0];
 Problem: The problem with this approach is that, If
we add or remove some elements in the form then the
DOM address could change. For example, if we add a
new button before the turnIton button in the
document, the DOM address shown would be wrong.

 Method-2 (using elements Name): Another approach
to DOM addressing is to use element names. For this the
element and its enclosing elements must include name
attributes.
 For example, consider the following document:
<body>
<form name = "myForm" action = "">
<input type = "button" name = "turnIton" />
</form>
</body>
</html>

 The DOM address of the button using the elements
name is as follows:
var dom = document.myForm. turnIton;
 Problem: One drawback of this approach is that the
XHTML 1.1 standard does not allow the name attribute
in the form element.

 Method-3 (Using getElementById method): Yet another
approach to element addressing is to use the JavaScript
method getElementById, which is defined in DOM 1. Because
an element's identifier (id) is unique in the document, this
approach works, regardless of how deeply the element is
nested in other elements in the document.
 For example, consider the following document:
<body>
<form name = "myForm" action = "">
<input type = "button" name = "turnIton“ id=“turnIton” />
</form>
</body>
 The DOM address of the button using the getElementById
method, is as follows:
var dom = document.getElementById("turnIton");

Events and Event Handling
Basic Concepts of Event Handling
 One important use of JavaScript for Web programming is to
detect certain activities of the browser and the browser user
and provide computation when these activities occur.
 An event is a notification that something specific has
occurred, either with the browser, such as the completion of
the loading of a document, or because of a browser user
action, such as a mouse click on a form button.
 Strictly speaking, an event is an object that is implicitly
created by the browser and the JavaScript system in response
to something happening.
 An event handler is a script that is implicitly executed in
response to the appearance of an event. Event handlers
enable a Web document to be responsive to browser and user
activities.

 Because events are JavaScript objects, their names are
case sensitive. The names of all event objects have only
lowercase letters. For example, click is an event, but
Click is not.
 Events are created by activities associated with specific
XHTML elements. For example, the click event can be
caused by the browser user clicking a radio button or the
link of an anchor tag, among other things.
 The process of connecting an event handler to an event is
called registration. There are two distinct approaches to
event handler registration, one that assigns tag attributes
and one that assigns handler addresses to object
properties.

Events, Attributes, and Tags
 HTML 4 defined a collection of events, which browsers
implement and with which JavaScript can deal. These
events are associated with XHTML tag attributes,
which can be used to connect the events to handlers.
 The attributes have names that are closely related to
their associated events.
 Table 5.1 lists the most commonly used events and
their associated tag attributes.

 An XHTML text element is said to get focus when the
user puts the mouse cursor over it and clicks the left
mouse button.
 An element can also get focus when the user tabs to
the element. Focus on an element can be forced with
focus method.
 Table 5.2 shows the most commonly used attributes
related to events, tags that can include the attributes,
and the circumstances under which the associated
events are created.

 The process of connecting an event handler to an event is
called registration. There are two ways to register an
event handler in the DOM 0 event model.
1. assigning the event handler script to an event tag
attribute
2. assigns handler addresses to object properties
 In first method we assign the event handler script to an
tag attribute.
 For example,
<input type="button" id="myButton" onclick="alert('You
clicked my button!');" />

 In many cases, the handler consists of more than a
single statement. For these, often a function is used,
and the literal string value of the attribute is the call to
the function as follows:
<input type = "button" id="myButton"
onclick="myButtonHandler();" />
 In second method we assign handler address to object
property.
 For example, following example shows the handler
address is assigned to the button object.
document.getElementById("myButton").onclick=myBut
tonHandler;

Handling Events from Body Elements
 The events most often created by body elements are
load and unload.
 As our first example of event handling, we consider the
simple case of producing an alert message when the
body of the document has been loaded.
 In this case, we use the onload attribute of <body> to
specify the event handler.

load.html
<html>
<head>
<title>Event From Body</title>
<script type="text/javascript" src="load.js">
</script>
</head>
<body onload="greeting();">
</body>
</html>
load.js
function greeting()
{
alert("you are visiting a Home Page n" + "Loaded from
body");
}

Handling Events from Button Elements
 Buttons in a document provide a simple and effective
way to collect input from the browser user. The most
commonly used event created by button is click.
 Consider the following example of a set off radio
buttons that enables the user to choose information
about a specific airplane. The click event is used this
example to trigger the call to alert, which presents a
brief description of the selected airplane.
 In this example the event handler is registered by
assigning its call to the onclick attribute off the radio
button.

radio.html
<html>
<head><title> button element</title>
<script type="text/javascript" src="radio.js">
</script>
</head>
<body>
<h2>Airplane Discription</h2>
<form id="myform">
Model 152<input type="radio" name="plane" value="152" onclick =
"planechoice(152)"/><br/>
Model 162<input type="radio" name="plane" value="162" onclick = "planechoice(162)
/><br/>
</form>
</body>
</html>

radio.js
function planechoice(plane)
{
switch(plane)
{
case 152:
alert("152 Model a small two-palce airplane");
break;
case 162:
alert("162 Model a small four-place airplane");
break;
case 172:
alert("172 Model a larger of two-place airplane");
break;
case 182:
alert("182 Model a larger of four-place airplane");
break;
default:
alert("Error in javascript function plane choice");
break;
}
}

The DOM 2 Event Model:
 The DOM 2 event model is more sophisticated and
powerful than DOM 0. The real drawback of using the
DOM 2 model is that Microsoft has yet to provide
support for it in its browsers.
 The DOM 2 model is a modularized interface. One of
the DOM 2 modules is Events, which includes several
sub modules. The most commonly used are
HTMLEvents and MouseEvents. The interfaces and
events defined by these modules are as follows:

Event Propagation
 The connection between an event and the handler that deals
with it is very simple in the DOM 0 event model.
 The event-handler connection for the DOM 2 event model is
much more complicated.
 Briefly, what happens is as follows. An event object is created
at a node in the document tree. For that event, that node is
called the target node. Event creation causes a three-phase
process to begin.
 The first of these phases is called the capturing phase. The
event starts at the document root node and propagates down
the tree to the target node. If there are any handlers for the
event registered on any node encountered in this propagation,
including the document root note, these handlers are checked
to determine whether they are enabled. Any enabled handler
for the event that is found during capturing is executed.

 When the event reaches the target node, the second
phase takes place, in which the handlers registered for
the event at the target node are executed. The second
phase is similar to what happens with the DOM 0
event model. After execution of any appropriate
handlers at the target node, the third phase begins.
 This is the bubbling phase, in which the event bubbles
back up the document tree to the document root node.
On this trip back up the tree, any handler registered
for the event at any node on the way is executed
(whether it is enabled or not).

Event Handler Registration
• Handler registration in the DOM 2 event model is performed
by the method addEventListener, which is defined in the
EventTarget interface, which is implemented by all objects that
descend from Document.
 The addEventListener method takes three parameters,
 The first of which is the name of the event as a string literal.
For example, "mouseup" and "submit" would be legitimate first
parameters.
 The second parameter is the handler function. This could be
specified as the function code itself or as the name of a
function that is defined elsewhere.
 The third parameter is a Boolean value that specifies whether
the handler is enabled for calling during the capturing phase.
If the value true is specified, the handler is enabled for the
capturing phase. In fact, an enabled handler can only be called
during capturing. If the value is false, the handler can be called
either at the target node or on any node reached during
bubbling.

 For example, suppose we want to register the event
handler chkName on the text element whose id is
custName for the change event. The following call
accomplishes this:
document.custName.addEventListener( "change", chkName, false);
 In this case, we want the handler to be called at the target
node, which is custName in this example, so we passed
false as the third parameter.
 Sometimes it is convenient to have a temporary event
handler. This can be done by registering the handler for
the time when it is to be used, and then deleting that
registration. The removeEventListener method deletes the
registration of an event handler. This method takes the
same parameters as addEventListener.

The navigator Object
 The navigator object indicates which browser is being
used to view the XHTML document.
 The browser's name is stored in the appName property
of the navigator object.
 The version of the browser is stored in the appVersion
property of the navigator object.
 These properties allow the script to determine which
browser is being used and to use processes appropriate
to the browser.
 The following example illustrates the use of the
navigator, In this case just to display the browser name
and version number.

Navigator.html
<html>
<head>
<title>navigator</title>
<script type="text/javascript" src="navigate.js">
</script>
</head>
<body onload="navproperty()">
</body>
</html>
Navigator.js
function navproperty()
{
alert("The browser is:" + navigator.appName + "n" +
"The Version is" + navigator.appVersion );
}

DOM Tree Traversal and Modification
 There are many objects, properties, and methods
associated with DOM 2 document representations.
One collection of these is defined in the Element
object and is used to traverse and modify the DOM
tree structure of the document being displayed.
 In this section we briefly describe a few of the most
useful of these. All of the properties and methods
mentioned here are supported by both IE7 and FX2.

DOM Tree Traversal
 The parentNode property has the DOM address of the
parent node of the node through which it is referenced.
 The previousSibling property has the DOM address of the
previous sibling node of the node through which it is
referenced.
 The nextSibling has the DOM address of the previous
sibling node of the node through which it is referenced.
 The firstChild and lastChild properties have the DOM
addresses of the first and last child nodes of the node
through which they are referenced.
 The nodeType property has the type of the node through
which it is referenced.

DOM Tree Modification
 The following methods allow JavaScript code to modify
an existing DOM tree structure.
 The insertBefore(newChild, refChild) places the
newChild node before the refChild node.
 The replaceChild(newChild, oldChild) method replaces
the oldChild with the newChild node.
 The removeChild(oldChild) method removes the
specified node from the DOM structure.
 The appendChild(newChild) method adds the given
node to the end of the list of siblings of the node
through which it is called.

JavaScript DOM and Event Handling Explained in 40 Characters

JavaScript DOM and Event Handling Explained in 40 Characters

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to JavaScript DOM and Event Handling Explained in 40 Characters

Similar to JavaScript DOM and Event Handling Explained in 40 Characters (20)

More from zahid7578

More from zahid7578 (7)

Recently uploaded

Recently uploaded (20)

JavaScript DOM and Event Handling Explained in 40 Characters