Learn What Is Event Bubbling And Capturing In HTML And JavaScript

HTML two ways Event bubbling and capturing. The event is first captured and handled by the innermost element and then propagated to the outer elements. Event bubbling is the part of the W3C Document. In the bubbling model, happen will be opposite. Event Bubbling to fire event handlers in the bubbling phase, but it can also be necessary to fire them earlier. Events first are captured down to deepest target, then bubble up. The bubbles event property returns a Boolean value that indicates whether or not an event is a bubbling event. Event bubbling directs an event to its intended target. The event is triggered when an event handler is set for the object. If no event handler is set for that object, the event bubbles up to the object's parent. The event bubbles up from parent to parent until it is handled, or until it reaches the document object. Event bubbling was introduced to deal with situations where a single event, such as a mouse clicks. If this is the case, the event bubbling process starts by executing the event handler defined for individual elements at the lowest level. The event bubbles up to the containing elements, then up to even higher-level elements. Finally, the event ends up being handled at the highest level in the DOM hierarchy, the document element itself.

        In JavaScript, events bubble. This means that an event propagates through the ancestors of the element the event fired on. That’s all event bubbling is, an event fired on an element bubbles through its ancestor chain. Few web developers consciously use event bubbling. But the main practical use of event capturing and bubbling today is the registration of default functions.

        Any click event on any element in the document will eventually bubble up to the document and thus fire this general event handler. Only when a previous event handling script explicitly orders the event to stop babbling, it will not propagate to the document. So in this case event bubbling is very useful because registering your event handlers on document level makes sure they’re always executed. Besides, if your document structure is very complex, you may save system resources by turning off bubbling. "Bubbling up" means that if there are no more matching event handlers in the component. In the Microsoft model you must set the event’s cancel Bubble property to true. If your document structure is very complex you may save system resources by turning off bubbling.

Share on Google Plus