Bubble Event

When a child control pass its event to the parent. It is called even Bubbling. It happens with DataGrid, DataList, and Repeater.

Problem
If an element and one of its ancestors have an event handler for the same event, which one should fire first? Element1 is outer element and element2 is inner. Means elemnt1 is parent of element2.

-----------------------------------
| element1 |
| ------------------------- |
| |element2 | |
| ------------------------- |
| |
-----------------------------------

Ans : This depends on the browser.

Suppose you have an element inside an element and both have an onClick event handler. If the user clicks on element2 he causes a click event in both element1 and element2. But which event fires first?

Back in the bad old days Netscape and Microsoft came to different conclusions.

* Netscape said that the event on element1 takes place first. This is called event capturing.
* Microsoft maintained that the event on element2 takes precedence. This is called event bubbling.

Internet Explorer only supports event bubbling. Mozilla, Opera 7 and Konqueror support both.

W3C has very sensibly decided to take a middle position in this struggle. Any event taking place in the W3C event model is first captured until it reaches the target element and then bubbles up again.

| | / \
-----------------| |--| |-----------------
| element1 | | | | |
| -------------| |--| |----------- |
| |element2 \ / | | | |
| -------------------------------- |
| W3C event model |
------------------------------------------

You, the web developer, can choose whether to register an event handler in the capturing or in the bubbling phase. This is done through the addEventListener() method explained on the Advanced models page. If its last argument is true the event handler is set for the capturing phase, if it is false the event handler is set for the bubbling phase.

Turning it off
You can turn off buuble event on window level or control level.

In the Microsoft model you must set the event’s cancelBubble property to true.

window.event.cancelBubble = true

In the W3C model you must call the event’s stopPropagation() method.

e.stopPropagation()

This stops all propagation of the event in the bubbling phase. Stopping event propagation in the capturing phase is impossible. One wonders why.

For a complete cross-browser experience do

function doSomething(e)
{
if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
}

Setting the cancel Bubble property in browsers that don’t support it doesn’t hurt. The browser shrugs and creates the property. Of course it doesn’t actually cancel the bubbling, but the assignment itself is safe.

Example :- The best example of event Bubbling we see in Grid with check boxes. Just like in gmail. If click on check box it select the row if click anywhere else in the row it fires the click event of grid. While you have clicked on check box two event should be fired one is check change and other one is selectedindexchange for grid but only one fired why? since they have made event bubling false for this column or check box.