July 24, 2000 - Event Bubbling

Yehuda Shiran July 24, 2000
Event Bubbling
Tips: July 2000

Yehuda Shiran, Ph.D.
Doc JavaScript

The concept of event bubbling in Internet Explorer may seem to be somewhat complicated. Every event fired on an element bubbles up the hierarchy of objects, until it reaches the top level element. Every object may handle the event in its turn. For example, this page includes the following event handling definition in its BODY tag:

<BODY ondragstart="alert('object dragged')">

Since every object on the page is a descendent of the BODY object, every dragstart event bubbles to the BODY object and is then handled by the ondragstart event handler. Try dragging either selected text or images. An alert box will pop up with the message "object dragged." The event fires on the P or IMG objects, but the handling is done by the BODY object. Learn more about the event model in Column 10, The Internet Explorer Event Model and Column 11, The Cross-Browser Event Model.