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
Go visit our java server pages services for a reliable, lowcost webhost to satisfy all your needs.

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.
From our experience, we can recommend PHP5 Web Hosting services, if you need affordable webhost to host and run your web application.

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
Visit our web design programs services for an affordable and reliable webhost to suit all your needs.

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  layer1

In some cases, your scripts need to know if an event that is passed onward by routeEvent() method activated a function that returns a value. This knowledge is especially valuable if your event must return a trueor falsevalue to let an object know if it should proceed with its default behavior (for example, whether a link should activate its HREF attribute URL or cancel after the event handler evaluates to return true or return false). When a function is invoked by the action of a routeEvent() method, the return value of the destination function is passed back to the routeEvent()method. That value, in turn, can be returned to the object that originally captured the event. Event traffic cop The last scenario is one in which a higher-level object captures an event and directs the event to a particular object elsewhere in the hierarchy. For example, you could have a document-level event handler function direct every click event whose modifiers property indicates that the Alt key was pressed to a Help button object whose own onClick event handler displays a help panel (perhaps shows an otherwise hidden layer). You can redirect an event to any object via the handleEvent() method. This method works differently from the others described in this chapter, because the object reference of this method is the reference of the object to handle the event
You need excellent and relaible webhost company to host your web applications? Then pay a visit to Inexpensive Web Hosting services.

719Chapter 29 .Event Objects } else { document.releaseEvents(Event.CLICK) document.forms[0].setDocRte.checked = false docRoute = false } } function setLayerCapture(enable) { if (!enable) { document.layer1.captureEvents(Event.CLICK) } else { document.layer1.releaseEvents(Event.CLICK) document.forms[0].setLyrRte.checked = false layerRoute = false } } var docRoute = false var layerRoute = false function setDocRoute(enable) { docRoute = !enable } function setLayerRoute(enable) { layerRoute = !enable } function doMainClick(e) { if (e.target.type == button ) { alert( Captured in top document ) if (docRoute) { routeEvent(e) } } } document.captureEvents(Event.CLICK) document.onclick=doMainClick Capture, Release, and Routing of Event.CLICK

---

Enable Document Capture  And let event continue

Enable Layer Capture  And let event continue

---

Continued
Note: In case you are looking for affordable and reliable webhost to host and run your j2ee application check Vision J2ee Web Hosting services.

718 Part III . Document Objects Reference Listing 29-2 (continued) NAME= layerButton2 onClick= alert( Event finally reached Button: + this.name) >

Passing events toward their targets If you capture a particular event type, your script may need to perform some limited processing on that event before letting it reach its intended target. For example, perhaps you want to do something special if a user clicks an element with the Shift metakey pressed. In that case, the function that handles the event at the document level inspects the event s modifiers property to determine if the Shift key was pressed at the time of the event. If the Shift key was not pressed, you want the event to continue on its way to the element that the user clicked. To let an event pass through the object hierarchy to its target, you use the routeEvent() method, passing as a parameter the event object being handled in the current function. A routeEvent() method does not guarantee that the event will reach its intended destination, because another object in between may have event capturing for that event type turned on and will intercept the event. That object, too, can let the event pass through with its own routeEvent()method. Listing 29-3 demonstrates event routing by adding onto the document being built in previous examples. While the clickable button objects are the same, additional powers are added to the document and layer function handlers that process events that come their way. For each of these event-capturing objects, you have additional checkbox settings to allow or disallow events from passing through after each level has processed them. The default settings for the checkboxes are like the ones in Listing 29-2, where event capture (for the click event) is set for both the document and layer objects. Clicking any button causes the document object s event handler to process and none other. But if you then enable the checkbox that lets the event continue, you find that click events on the layer buttons cause alerts to display from both the document and layer object event handler functions. If you then also let events continue from the layer object, a click on the button displays a third alert, showing that the event has reached the buttons. Because the main1 button is not in the layer, none of the layer object event handling settings affect its behavior. Listing 29-3: NN4 Capture, Release, and Route Events Document-level and/or Layer-level capture of Event.CLICK

---

Enable Document Capture Enable Layer Capture

---

 layer1

We would like to recommend you tested and proved virtual web hosting services, which you will surely find to be of great quality.

716 Part III . Document Objects Reference Listing 29-1 (continued)

With document-level event capture turned on (the default), all click events are trapped by the document s onclickevent handler property, a function that alerts the user that the event was captured by the top document. Because all click events for buttons are trapped there, even click events of the layer s buttons are trapped at the top. But if you turn off event capture, the events reach their intended targets. Note If the logic of the setDocCapture() function seems backwards to you, recall that when the onMouseDown event fires on the checkbox, its state is the opposite of what it is being changed to. In Listing 29-2, I add some code (shown in boldface) that lets the layer object capture clickevents whenever the outer document event capture is turned off. Inside the tag, a script sets the layer to capture clickevents. Therefore, if you disable the outer document capture, the clickevent goes straight to the main1 button and to the layer event capture. Event capture in the layer object prevents the events from ever reaching the buttons in the layer, unless you disable event capture for both the document and the layer. Listing 29-2: Document and Layer Event Capture and Release Basic document-level capture of Event.CLICK

---

Enable Document Capture

---

Continued
From our experience, we are can tell you that you can find a reliable and cheap webhost service at Java Web Hosting services.