January 31, 2000 - IE Event Bubbling
January 31, 2000|
IE Event Bubbling
Tips: January 2000
Yehuda Shiran, Ph.D.
Since every single element on the page is represented as an object, you can provide an
This is a paragraph, and <B>these are bold words in the paragraph</B>.
onClickevent handler for the paragraph tag (
<P></P>). When you click the word "is," for instance, the click event is directed to the
Pelement for processing. Since the
Pelement features an appropriate event handler, it handles the event, and the event does not continue its journey. However, when you click the word "these," the event is first sent to the
<B></B>), because it is also reflected as an object. However, the
Belement doesn't feature an
onClickevent handler, so the click event bubbles up to its parent object, which happens to be the
Pelement. The paragraph then handles the event. If Internet Explorer 4.0x didn't support event bubbling, this would not be possible. Clicking "these" would cause no action because there is no event handler attached to the
Belement. Here's the preceding example in action:
This is a paragraph, and these are bold words in the paragraph.Just click anywhere in the pargraph to trigger the P element's event handler. Take a look at the following example:
If you click the bold part of the paragraph, the
This is a paragraph, and <B onClick="functionName1()">these are bold words in the paragraph</B>.
Belement's event handler is called, and
functionName1()is executed. Since the event handler does not return false, the event bubbles up to the next element in the hierarchy, P.
Pelement's event handler is called and
functionName2()is executed. The event then continues its jourey through the object hierarchy, until it reaches the next defined element on the page. For your reference, here's the preceding example in action:
This is a paragraph, and these are bold words in the paragraph.Now consider the following statement:
document.onclick = functionName;
Even though this seems to be a very simple statement, it actually requires event bubbling in order to work properly. For example, if you click an image on the page, the click event bubbles up from the image's object to the document object (provided that none of the objects in the event's path handle it and return false).
Learn more about events and event bubbling in Column 10, The Internet Explorer Event Model.