DOM Event Propagation Three types of event listeners DOM Event Propagation

Dom event propagation three types of event listeners

This preview shows page 15 - 19 out of 19 pages.

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
Image of page 15
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.
Image of page 16
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
Image of page 17
18 AJAX Asynchronous Javascript And Xml AJAX: Normal Request Response Loop AJAX: The Problem AJAX: The Solution
Image of page 18
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(); }
Image of page 19

You've reached the end of your free preview.

Want to read all 19 pages?

  • Fall '09
  • KUNZ

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture