Event Bubbling

This demo page demonstrates how event bubbling works in the Internet Explorer event model. To run this demo, click anywhere in the boxes below and note how the event is propagated up the object hierarchy from Level 1 up to the Web document itself. To cancel event bubbling at a given point in the document tree, click one of the radio buttons to apply the following command at the specified level:

   window.event.cancelBubble = true;

This command prevents the onclick event from moving up the document tree. Note that if you click a level above the location of the cancelBubble property, the onclick event propagates from that point upward without being canceled.

Level 4
Level 3
Level 2
Level 1
Cancel Event
Bubbling
At
Level
Event
Detected
Document
Level 4
Level 3
Level 2
Level 1