Event bubbling

src: i.ytimg.com

Event description is a type of event propagation where the event first triggered the deepest target element and then subsequently triggered the parent (parent) ancestor of the target element in the same nested hierarchy until it reaches the outer DOM of the element or document object (Provided the handler is initialized). This is one way to handle events in the browser. Events are actions performed by a user such as a click of a button, change a field, etc. Event Planner is used to perform methods according to events that have occurred. For eg: Steps that need to be done after the button is clicked or after the web page has finished loading, etc.

Video Event bubbling

Overview

Consider a DOM structure where there are 3 nested elements in the following order: Element 1 (Div), Element 2 (Range), Element 3 (Buttons) whose handler clicks are handler1 (), handler2 () and handler3 () respectively.

    & lt; div id = "Element1" onclick = "handler1 ()" & gt;  Â Â & lt; span id = "Element2" onclick = "handler2 ()" & gt;  Â Â Â Â & lt; input type = "button" id = "Element3" onclick = "handler3 ()"/& gt;  Â Â & lt;/span & gt;  & lt;/div & gt;  

When the button is clicked, the event handler for Element 3 is triggered first, then bubbly event and handler for the parent element directly - Element 2 is called, followed by handler for Element 1 and so on until it reaches the outermost DOM element..

Event handling commands: handler3 () - & gt; handler2 () - & gt; handler1 ()

The deepest element of the triggered scene is called the target element. Most browsers consider the event to bubble up as the standard way of event propagation. However, there is another approach to event propagation known as Event Capture , which is the direct opposite of bubble events, where event handling starts from the outer element (or Document) of the DOM structure and runs all the way to the element target, executes the handler of the last target element in the sequence.

Maps Event bubbling

Implementation

All event handlers consider the event to bubble up as the default way of handling the event. But users can manually select propagation by specifying that as the last parameter in addEventListener () of any element in JavaScript.

 addEventListener ("type", "Listener", "CaptureMode") 

If CaptureMode False, the event will be handled using bubble events.

If CaptureMode is True, the event will be handled using event capture.

If a user does not specify any value from the CaptureMode argument, then by default it is considered a bubbly event. Most browsers support both event overflow and event capture (Except IE & lt; 9 and Opera & lt; 7.0 which do not support event capture).

JavaScript also provides an event property called ' bubble ' to check whether the event is bubbling or not. This returns a True or False Boolean value depending on whether the event can overflow up to the parent element within the DOM structure or not.

 var isBubblePossible = event.bubbles; 

isBubblePossible: True, if the event can burst into the ancestor

isBubblePossible: Wrong, if event can not overflow

src: dab1nmslvvntp.cloudfront.net

Use Event Bubbling

To handle cases where one event has more than one handler, the bubble event concepts can be implemented. The main use of a bubble event is the registration of the default functions that exist within the program. Recently, not many developers are using event capture or ballooning in particular. No need to implement bubbling events; it may become complicated for the user to track the action being executed due to an event.

src: i.ytimg.com

How to stop bubbles

Since all browsers with default support bubble events, it is sometimes useful to stop events that balloon as users may be confused when a single trigger on one element leads to some trigger on the parent. So for a simple individual need where a user wants one event on one element, the other on the other, the overflow of an event is not a necessity. To stop an event from overflowing, users can use one of the following approaches:

1) stopPropagation () : This method stops further propagation of any particular event to its parent, simply calling the event handler of the target element. Although supported by all W3C-compatible browsers, this method does not work with Internet Explorer version 9 or lower.

For IE & lt; 9, we can stop the bubble using the following code:

 event.cancelBubble = true; 

For all browsers compatible with W3C:

 event.stopPropagation (); 

2) stopImmediatePropagation () : This method will not only stop further propagation but also stop other controllers from the target event from execution. At DOM, we can have multiple handlers for the same event and they are independent of each other. So stopping the execution of one event handler generally does not affect other handlers of the same target. But the stopImmediatePropagation () method prevents the execution of other handlers from the same target.

For all browsers compatible with W3C:

 event.stopImmediatePropagation (); 

Another approach to stopping a bubble event is to cancel the event (preventDefault () or return false). But it prevents the execution of the target handler as well and is therefore not recommended for use if the goal is to prevent only bubble events and the user still wants some action related to the target element.

src: apress.jensimmons.com

See also

• DOM event

src: i.ytimg.com

References

src: embedwistia-a.akamaihd.net

External links

• Event capture
• Cancel event

Source of the article : Wikipedia