What is event bubbling and capturing in JavaScript?

1.	What is event bubbling and capturing in JavaScript?
Answer» The propagation of events inside the DOM (Document Object Model) is known as 'Event Flow' in JavaScript. The event flow defines the order or sequence in which a particular WEB page receives an event. Accordingly, event flow (propagation) in JS is dependent on the following aspects: Event Bubbling: With Event Bubbling, the event is captured and handled first by the innermost element, and then propagates to the outermost element. Events PROPAGATE up the DOM TREE from child elements until the topmost element is handled. Event Capturing: With Event Capturing, the event is captured and handled first by the outermost element, and then propagates to the innermost element. Event cycles propagate starting with the wrapper elements and ENDING with the target elements that initiated the event cycle. The following diagram will help you to understand the event propagation life cycle.

Answer»

The propagation of events inside the DOM (Document Object Model) is known as 'Event Flow' in JavaScript. The event flow defines the order or sequence in which a particular WEB page receives an event. Accordingly, event flow (propagation) in JS is dependent on the following aspects:

Event Bubbling: With Event Bubbling, the event is captured and handled first by the innermost element, and then propagates to the outermost element. Events PROPAGATE up the DOM TREE from child elements until the topmost element is handled.
Event Capturing: With Event Capturing, the event is captured and handled first by the outermost element, and then propagates to the innermost element. Event cycles propagate starting with the wrapper elements and ENDING with the target elements that initiated the event cycle.

The following diagram will help you to understand the event propagation life cycle.

What is event bubbling and capturing in JavaScript?

Discussion

No Comment Found

Related InterviewSolutions

Reply to Comment