Event Bubbling Vs. Event Capturing
If there are three elements FORM, DIV and PARAGRAPH. DIV element placed inside the FORM element. PARAGRAPH is inside DIV and we attach an event handler with both the elements lets say onClick . Now when we click on PARAGRAPH then eventHandler for all three elements will be executed. Now here the question is in which order the event will execute. If the event attached with PARAGRAPH executes first this is called Event Bubbling and if the event attached with FORM executes first it is called Event Capturing. As per W3C the event will start in the capturing phase until it reaches the target comes back to the element and then it starts bubbling .
With bubbling , the event is first captured and handled by the innermost element and then propagated to outer elements. Only certain events can bubble. Events that do bubble have this property set to true. You can use this property to check if an event is allowed to bubble or not. At present, all the modern browsers have event bubbling as the default way of event flow.
Click anywhere inside Div