Dom event propagation three types of event listeners

DOM Event Propagation
, Three types of event listeners :
DOM Event Propagation
, Three types of event listeners :
Capturing : Listener on ancestor created with true as third arg.
DOM Event Propagation
, Three types of event listeners :
Target : Listener on target element

16
DOM Event Propagation
, Three types of event listeners :
Bubbling : Listener on ancestor created with false as third arg.
DOM Event Propagation
, Priority of event handlers:
body
ol
li
a
1. Capturing event
handlers; ancestors
closest to root
have highest
priority
Target
DOM Event Propagation
, Priority of event handlers:
body
ol
li
a
2.
Target event handlers
DOM Event Propagation
, Priority of event handlers:
body
ol
li
a
3. Bubbling event
handlers; ancestors
closest to target have
priority.

17
DOM Event Propagation
, Certain events do not bubble , e.g .,
– load
– unload
– focus
– blur
DOM Event Propagation
, Propagation-related properties of Event instances:
– eventPhase : represents event processing phase:
, 1: capturing (rarely used, not default for event handlers)
, 2: target
, 3: bubbling
– currentTarget : object (ancestor or target) associated with this event handler
DOM Event Propagation
, Propagation-related method of Event instances:
– stopPropagation() : lower priority event handlers will not be called
, Typical design:
– Use bubbling event handlers to provide default processing (may be stopped)
– Use capturing event handlers to provide required processing
Event Propagation

18
AJAX
Asynchronous Javascript And Xml
AJAX: Normal Request Response Loop
AJAX: The Problem AJAX: The Solution

19
AJAX and Events
, Various ways to program with AJAX
, Some frameworks (like jQuery) provide templates to simplify most
common uses
, In “pure” JavaScript, the steps are basically as follows
– Create an HTTP Request object that will ultimately make the request for a document
– Register event handlers for various events, mostly onreadystatechange
– Send HTTP request
– When document is received, events are triggered, resulting in appropriate callbacks
to be called
– Callback functions have access to returned document (originally an XML document)
programmatically (another DOM) and can parse it, extracting the requested info
– Callback functions dynamically make change to current document
Simple AJAX Example
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}