730 Part III . Document Objects Reference Listing 29-8 (continued) document.onclick = docEvent document.body.onclick = docBodEvent // turn on click event capture for two objects document.addEventListener( click , docEvent, true) document.forms[0].addEventListener( click , formCaptureEvent, true) // set event listener for bubble document.forms[0].addEventListener( click , formBubbleEvent, false) } function winEvent(evt) { if (evt.target.type == button ) { alert( Event is now at the window object level ( + getPhase(evt) + ). ) } } function docEvent(evt) { if (evt.target.type == button ) { alert( Event is now at the **document** object level ( + getPhase(evt) + ). ) } } function docBodEvent(evt) { if (evt.target.type == button ) { alert( Event is now at the BODY level ( + getPhase(evt) + ). ) } } function formCaptureEvent(evt) { if (evt.target.type == button ) { alert( This alert triggered by FORM only on CAPTURE. ) if (document.forms[0].stopAllProp.checked) { evt.stopPropagation() } } } function formBubbleEvent(evt) { if (evt.target.type == button ) { alert( This alert triggered by FORM only on BUBBLE. ) if (document.forms[0].stopDuringBubble.checked) { evt.preventBubble() } } } // reveal event phase of current event object function getPhase(evt) { switch (evt.eventPhase) { case 1: return CAPTURING break case 2: return AT TARGET break case 3: return BUBBLING
Note: If you are looking for cheap and reliable webhost to host and run your mysql application check mysql web server services.

729Chapter 29 .Event Objects case 1: return CAPTURING break case 2: return AT TARGET break case 3: return BUBBLING break default: return } }

W3C DOM Event Propagation

---

If you want to remove event capture after it has been enabled, use the removeEventListener() method on the same object as the event listener that was originally added (see Chapter 15). And, because multiple event listeners can be attached to the same object, specify the exact same three parameters to the removeEventListener() method as applied to the addEventListener()method. Preventing NN6 event bubbling or capture Corresponding to the cancelBubble property of the IE4+ event object is an event object method in the W3C DOM. The method that prevents propagation in any event phase is the stopPropagation()method. Invoke this method anywhere within an event listener handler function. The current function executes to completion, but the event propagates no further. Listing 29-8 extends the example of Listing 29-7 to include two checkboxes that let you stop propagation type at the FORM element in your choice of the capture or bubble phase. Listing 29-8: Preventing Bubble and Capture

Event Cancelling & Redirecting

---

Searching for affordable and reliable webhost to host and run your web applications? Go to our java web server services and you will be pleased.

725Chapter 29 .Event Objects Event Handler Location IE4+/Windows IE4+/Macintosh NN6 BODY yes yes yes HTML yes no yes document yes yes yes window no no yes Despite the discrepancies in Table 29-1, events do bubble through the most likely HTML containers that come to mind. The object level with the most global scope and that works in all browser categories shown in the table is the document object. Preventing IE event bubbling Because bubbling occurs by default, there are times when you may prefer to prevent an event from bubbling up the hierarchy. For example, if you have one handler at the document level whose job is to deal with the clickevent from a related series of buttons, any other object that receives clickevents will allow those events to bubble upward to the document level unless the bubbling is cancelled. Having the event bubble up could conflict with the document-level event handler. Each eventobject in IE has a property called cancelBubble. The default value of this property is false, which means that the event bubbles to the next outermost container that has an event handler for that event. But if, in the execution of an event handler, that property is set to true, the processing of that handler finishes its job, but the event does not bubble up any higher. Therefore, to stop an event from bubbling beyond the current event handler, include the following statement somewhere in the handler function: event.cancelBubble = true You can prove this to yourself by modifying the page in Listing 29-5 to cancel bubbling at any level. For example, if you change the event handler of the FORM element to include a statement that cancels bubbling, the event goes not further than the FORM in IE (the syntax is different for NN6, as discussed later): Redirecting events Starting with IE5.5, you can redirect an event to another element, but with some limitations. The mechanism that makes this possible is the fireEvent()method of all HTML element objects (see Chapter 15). This method isn t so much redirecting an event as causing a brand-new event to be fired. But you can pass most of the properties of the original eventobject with the new event by specifying a reference to the old event object as the optional second parameter to the fireEvent() method. The big limitation in this technique, however, is that the reference to the target element gets lost in this hand-off to the new event. The srcElement property of the old event gets overwritten with a reference to the object that is the target of the call to fireEvent(). For example, consider the following onClick event handler function for a button inside a FORM element:
In case you need quality webspace to host and run your web applications, try our personal web hosting services.

724 Part III . Document Objects Reference Listing 29-5: Event Bubbling Demonstration

Event Bubbles

---

You can try this listing in IE4+ and even NN6, because the latter observes event bubbling. But you will notice differences in the precise propagation among IE4+/Windows, IE4+/Macintosh, and NN6. But first, notice that after you click the button in Listing 29-5, the event first fires at the target: the button. Then the event bubbles upward through the HTML containment to fire at the enclosing FORM element; next to the enclosing BODY element; and so on. Where the differences occur are after the BODY element. Table 29-1 shows the objects for which event handlers are defined in Listing 29-5 and which objects have the clickevent bubble to them in the three classes of browsers. Table 29-1 Event Bubbling Variations for Listing 29-5 Event Handler Location IE4+/Windows IE4+/Macintosh NN6 BUTTON yes yes yes FORM yes yes yes
We would like to recommend you tested and proved virtual web hosting services, which you will surely find to be of great quality.

723Chapter 29 .Event Objects Send event to layerButton2

---

 layer1

IE4+ event propagation Event propagation in IE4+ flows in the opposite direction of the NN4 event capture model. IE s model is called event bubbling, in which events bubble upward from the target object through the element containment hierarchy. It s important to distinguish between the old-fashioned document object hierarchy (followed in the NN4 event capture model) and the more modern notion of HTML element containment a concept that carries to the W3C DOM as well. A good way to demonstrate the effect of event bubbling a behavior that is turned on by default is to populate a simple document with lots of event handlers to see which ones fire and in what order. Listing 29-5 has onClickevent handlers defined for a button inside a form, the form itself, and other elements and object all the way up the hierarchy out to the window.
We recommend cheap and reliable webhost to host and run your web applications: Coldfusion Web Hosting services.

722 Part III . Document Objects Reference Listing 29-4 (continued) function setLayerRoute(enable) { layerRoute = !enable document.forms[0].setLyrShortCircuit.checked = false layerShortCircuit = false } var docShortCircuit = false var layerShortCircuit = false function setDocShortcut(enable) { docShortCircuit = !enable if (docShortCircuit) { document.forms[0].setDocRte.checked = false docRoute = false } } function setLayerShortcut(enable) { layerShortCircuit = !enable if (layerShortCircuit) { document.forms[0].setLyrRte.checked = false layerRoute = false } } function doMainClick(e) { if (e.target.type == button ) { alert( Captured in top document ) if (docRoute) { routeEvent(e) } else if (docShortCircuit) { document.layer1.document.forms[0].layerButton2.handleEvent(e) } } } document.captureEvents(Event.CLICK) document.onclick=doMainClick Redirecting Event.CLICK

---

Enable Document Capture  And let event continue Send event to layerButton2

Enable Layer Capture  And let event continue
In case you need affordable webhost to host your website, our recommendation is ecommerce web host services.

721Chapter 29 .Event Objects (with the event object being passed as a parameter, such as the other methods). As long as the target object has an event handler defined for that event, it will process the event as if it had received the event directly from the system (even though the event object s targetproperty may be some other object entirely). To demonstrate how this event redirection works, Listing 29-4 includes the final additions to the document being built so far in this chapter. The listing includes mechanisms that allow all click events to be sent directly to the second button in the layer (layerButton2). The previous interaction with document and layer event capture and routing is still intact, although you cannot have event routing and redirection on at the same time. The best way to see event redirection at work is to enable both document and layer event capture (the default settings). When you click the main1button, the event reaches only as far as the document-level capture handler. But if you then turn on the Send event to layerButton2 checkbox associated with the document level, a click of the main1button reaches both the document-level event handler and layerButton2, even though the main1button is not anywhere near the layer button in the document object hierarchy. Click other checkboxes to work with the interaction of event capturing, routing, and redirection. Listing 29-4: NN4 Redirecting Events