The DOM is an hierarchical model. All the objects are organized in a hierarchy, with the Window object being on the top.
The Document object contains all the objects that are loaded in the HTML. Document object is the parent to all the tags in HTML.Document object is then followed by the
<html> tag and then by the
Event capture occurs when the flow of events starts from the outermost element and moves downward to the target element. This is phase 1 of event flow.
Event bubbling occurs when the flow of events starts from the innermost element and moves upward to the parent elements. Hence the name bubbling(bubbles move upwards from the bottom), this is the phase 2 of the event flow.
This is the default event flow in most of the modern browsers.
The below image shows how event bubbling occurs when the text 'hello' is clicked.