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.
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:<html>
If a user clicks the <div/> element using IE 5.5,the event bubbles in the following order:
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:<html onclick=”handleClick()”>
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.
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:
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.
Java Script Related Tutorials
|Adv Java Tutorial||Core Java Tutorial|
|Java-Springs Tutorial||Java Servlets Tutorial|
|EJB(Enterprise JavaBeans) Tutorial||JavaServer Faces (JSF) Tutorial|
|Java Swing Tutorial||Java Tutorial|
|JavaMail API Tutorial||Java 8 Tutorial|
|Java XML Tutorial||Java Bean Utils Tutorial|
|The Java Debugger (JDB) Tutorial||Java.math Package Tutorial|
Java Script Related Interview Questions
|Java Script Interview Questions||Adv Java Interview Questions|
|Core Java Interview Questions||Java-Springs Interview Questions|
|Java Servlets Interview Questions||EJB(Enterprise JavaBeans) Interview Questions|
|JavaServer Faces (JSF) Interview Questions||Java Swing Interview Questions|
|Java 8 Interview Questions||Java XML Interview Questions|
|JavaFX Interview Questions||The Java Debugger (JDB) Interview Questions|
Java Script Related Practice Tests
|Java Script Practice Tests||Adv Java Practice Tests|
|Core Java Practice Tests||Java-Springs Practice Tests|
|Java Servlets Practice Tests||EJB(Enterprise JavaBeans) Practice Tests|
|JavaServer Faces (JSF) Practice Tests||Java 8 Practice Tests|
All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd
Wisdomjobs.com is one of the best job search sites in India.