WebReference.com - Part 2 of Chapter 6 from Dynamic HTML: The Definitive Reference, 2nd Edition. From O'Reilly (4/8). | WebReference

WebReference.com - Part 2 of Chapter 6 from Dynamic HTML: The Definitive Reference, 2nd Edition. From O'Reilly (4/8).

To page 1To page 2To page 3current pageTo page 5To page 6To page 7To page 8
[previous] [next]

Dynamic HTML: The Definitive Reference, 2E. Chapter 6: Scripting Events

Event Bubbling

Event bubbling is the default propagation path for most events starting in IE 4 and Netscape 6. Some system-fired events work only in their target elements. For example, if you have an onload event listener assigned to a few img elements and the body element, you probably don't want an img element's load event to bubble up to the body element, firing each time an image's src property changes.

Event bubbling is often vital in scripting events for elements that display body text. The node-centric W3C DOM allows ordinary text nodes to be event listeners. Therefore, if you assign a mouse-related event to a text container, the target node of the event will be the text node within that container. By default the event bubbles outward to the container where the event can be easily processed, but the event object's properties point to the text node, not the container. This is different from the IE event model, in which only elements are targets of events. To equalize this possibility in processing an event, your scripts must take the node into account. Here is one cross-browser way to make sure that your function locates a reference to the element surrounding the text (or, as a last resort, the document node):

function myFunction(evt) {
    evt = (evt) ? evt : ((event) ? event : null);
    if (evt) {
        var elem = (evt.target) ? evt.target : 
                   ((evt.srcElement) ? evt.srcElement : null);
        if (elem) {
            elem = (elem.nodeType == 1 || elem.nodeType == 9) ? elem : 
                   elem.parentNode;
            // ok, now we're ready to work with the element
        }
    }
}

Most events triggered by user action with the mouse and keyboard bubble upward through the hierarchy from the target element. Conflicts can arise, however. For example: you assign an onmousedown event handler for several images so they can swap .jpg files while the mouse is being held down. But you also define an onmousedown event handler for the body element to act as a single handler to assist in dragging several positioned div elements around the page. To prevent the img element mousedown events from bubbling up through the hierarchy, you can explicitly instruct an event not to bubble beyond a specific element.

The cross-browser way of canceling event bubbling (starting in IE 4 and Netscape 6) involves the Boolean cancelBubble property of the event object, adjusted within the event handler function. It's the same property name and behavior for both IE and Netscape 6 event objects (this property is not a member of the W3C DOM event object, but Netscape 6 implements it as a compatibility convenience). The default value for this property is false, meaning that event bubbling takes place. But if you set this property to true, the event does not bubble past the current event handler.

Set the cancelBubble property to false in a script statement executing in the current event's function. Thus, if you assign an event handler as an element property, the bubble cancelation can take place in the function invoked by the event handler:

function myFunction(evt) {
    evt = (evt) ? evt : ((event) ? event : null);
    if (evt) {
        // include next statement anywhere in this block
        evt.cancelBubble = true;
    }
}

Only one event bubbles at any given instant, so this statement knows to cancel the right one. It also means that you can let an event bubble part of the way through the element hierarchy, but stop it at any desired element, so as not to interfere with other elements higher up the chain.


To page 1To page 2To page 3current pageTo page 5To page 6To page 7To page 8
[previous] [next]

Created: September 9, 2002
Revised: September 9, 2002

URL: http://webreference.com/programming/javascript/dhtmlref/chap6/2/4.html