Event Flow - Java Script

Both the development teams for Internet Explorer 4.0 and Netscape Navigator 4.0 decided that supporting events was not enough, so each came up with its own form of event flow.Event flow means that more than one element on the page can respond to the same event. What happens when you click a button on the page? In reality, you are clicking the button,its container,and the page as a whole.Logically,each of the elements should be able to respond to that event in a specific order. The order of events (the event flow) is the main difference between event support in IE 4.0 and Netscape 4.0.

Event bubbling

For Internet Explorer,the solution was answered by a technique dubbed bubbling.The basic idea of event bubbling is that the event fires sequentially from the most specific event target to the least specific (the document object).For instance,you have the following page:

If a user clicks the <div/> element using IE 5.5,the event bubbles in the following order:

1. <div/>
2. <body/>
3. document

Logically,you can think of the event bubbling in this example as it is mapped in Figure.

This manner of flow is called bubblingbecause, as displayed in the diagram,the event bubbles up the DOM hierarchy until it reaches the top.IE changed event bubbling slightly in version 6.0 so that the <html/> element also receives the bubbled events,allowing for code such as this:

In this example,a click on the page bubbles back up to the <html/> element,causing the previous diagram to change as shown in Figure.

Mozilla 1.0 and higher also supports event bubbling, but to another level.Just like IE 6.0,it supports events on the <html/> element.However,events bubble all the way up to the window object(which is not a part of the DOM). Using the previous example in Mozilla,clicking the <div/>element causes the event bubbling displayed in Figure.

Event capturing

While Internet Explorer 4.0 used event bubbling,Netscape Navigator 4.0 used an alternate solution called event capturing.Event capturing is just the opposite of bubbling; events fire from the least-specific object(the document object) to the most specific (it was also possible to capture events at the window level,but that has to be specified explicitly by the developer). Netscape Navigator also doesn’t expose many elements on the page to events.

Referring again to the previous example, if a user clicks the <div/> element using Netscape 4.x, the event takes the following path:
1.document
2.<div/>

Some have also called this the top-down event model because it works from the top of the DOM hierarchy to the bottom.

DOM event flow

The DOM supports both event capturing and event bubbling, but event capturing occurs first. Both event flows hit all the objects in the DOM, beginning and ending with the document object (most standards-compliant browsers continue capturing/bubbling up to the window object).

Consider once again the simple example shown earlier.When the <div/> element is clicked in a DOMcompliant browser, the event flow proceeds as shown in Figure

Note that because the target of the event (the <div/> element) is the most specific element(and therefore, deepest in the DOM tree),it actually receives the event two times in a row,once in the capturing phase and once in the bubbling phase.

A unique feature of the DOM event model is that text nodes fire events as well(this is not so in Internet Explorer).So if you click the text Click Me in the example,the event flow actually looks like Figure.

This is an important concept when you are working with DOM-compliant browsers. Forgetting that text nodes fire events in the DOM is the number one reason why developers get headaches working with newer browsers.