Event Bubbling Interview Questions (Oyo)
Oyo asks about event bubbling. Here are the questions and answers.
Event Bubbling Interview Questions (Oyo)
Q1: What is event bubbling?
Events propagate from the target up to the document. A click on a button inside a div triggers both the button's and div's listeners.
Q2: How do you stop bubbling?
e.stopPropagation() in the handler.
Q3: What is event capturing?
Events propagate from the document down to the target. Use addEventListener(type, handler, true).
Q4: What is event delegation?
Using event bubbling to handle events for multiple children with one listener on the parent.
Q5: What is the difference between stopPropagation and stopImmediatePropagation?
stopPropagation stops bubbling but other listeners on the same element still run. stopImmediatePropagation stops both.
Q6: What is the order of event phases?
Capturing (down) -> Target -> Bubbling (up).
The Takeaway
Oyo questions: what is bubbling (bottom-up propagation), how to stop (stopPropagation), capturing (top-down, third arg true), delegation (one listener on parent), stopPropagation vs stopImmediatePropagation, and phase order (capturing -> target -> bubbling).
When an event on a child element propagates up to its parents. A click on a button inside a div triggers the button's listener first, then the div's listener, up to the document.
Call e.stopPropagation() in the event handler. This prevents the event from propagating to parent elements. Other listeners on the same element still run.
stopPropagation prevents bubbling to parents but other listeners on the same element still run. stopImmediatePropagation prevents both bubbling and other listeners on the same element.
Capturing (top-down: document to target's parent), Target (event reaches the target), Bubbling (bottom-up: target to document). Default listeners run in the bubbling phase.
Event delegation puts one listener on a parent instead of many on children. When a child is clicked, the event bubbles to the parent, which checks e.target to determine which child was clicked. This uses bubbling to handle multiple elements efficiently.
Ready to master React completely?
Want to upskill yourself, crack your next interview, and get your dream job? Join our comprehensive course to dive deeper with high-quality video tutorials, solve interview questions, and a premium community.
Master React
Want to upskill yourself, crack your next interview, and get your dream job? Join our comprehensive course.