Professional Web Hosting, Web Hosting Php - Php4, Php5 Programming Blog

CD-187Appendix F . Examples from Parts III and IV Example The small laboratory of Listing 15-26 enables you to explore the possibilities of the IE5.5 fireEvent()method while reinforcing event bubbling concepts in IE. Three nested element objects are assigned separate onClickevent handlers (via the init() function invoked after the page loads although you can also set these event handlers via onClick attributes in the tags). Each handler displays an alert whose content reveals which object s event handler was triggered and the tag name and ID of the object that received the event. The default behavior of the page is to allow event bubbling, but a checkbox enables you to turn off bubbling. After you load the page, click the italic segment (a nested SPAN element) to receive a series of three alert boxes. The first advises you that the SPAN element s onClick event handler is processing the event and that the SPAN element (whose ID is mySPAN) is, indeed, the source element of the event. Because event bubbling is enabled by default, the event bubbles upward to the SPAN element s next outermost container: the myPparagraph element. (However, mySPANis still the source element.) Finally, the event reaches the BODY element. If you click in the H1 element at the top of the page, the event is not processed until it reaches the BODY element although the H1 element is the source element because that s what you clicked. In all cases, when you explicitly click something to generate the onclick event, the event s buttonproperty shows zero to signify the primary mouse button in IE. Now onto the real purpose of this example: the fireEvent()method. Three buttons enable you to direct a click event to each of the three elements that have event handlers defined for them. The events fired this way are artificial, generated via the createEventObject() method. For demonstration purposes, the buttonproperty of these scripted events is set to 3. This property value is assigned to the event object that eventually gets directed to an element. With event bubbling left on, the events sent via fireEvent()behave just like the physical clicks on the elements. Similarly, if you disable event bubbling, the first event handler to process the event cancels bubbling, and no further processing of that event occurs. Notice that event bubbling is cancelled within the event handlers that process the event. To prevent the clicks of the checkbox and action buttons from triggering the BODY element s onClick event handlers, event bubbling is turned off for the buttons right away. Listing 15-26: Using the fireEvent() Method