What is an event flow?
Interviewer Expectations for this Question
01
Core Competency
Assesses fundamental understanding of JavaScript conventions, runtime behavior, and memory/performance considerations.
02
Evaluation Criteria
Hiring managers look for precision, avoidance of ambiguous jargon, and ability to explain trade-offs under real production conditions.
Comprehensive Model Answer
Verified Solution
Event flow refers to the order in which events are handled in the browser when a user interacts with elements on a webpage like clicking, typing, hovering, etc.
When you click an element that is nested in various other elements, before your click actually reaches its destination, or target element, it must trigger the click event for each of its parent elements first, starting at the top with the global window object.
Hence, there are three phases in JavaScript’s event flow:
- Event Capturing(Top to Bottom): The event starts from the window/document and moves down the DOM tree toward the target element.
- Target phase: The event reaches the target element — the element that was actually interacted with.
- Event Bubbling(Bottom to Top): The event then bubbles back up from the target element to the root.
Candidate Response Strategy & Interview Tips
- Start with a concise one-sentence summary: Deliver a direct, confident answer first before expanding into nuances.
- Demonstrate real-world trade-offs: Discuss where this approach excels and when you would avoid it in production systems.
- Discuss complexity & edge cases: Proactively explain time/space complexity or boundary conditions (null values, scale limits).
- Prepare for interviewer follow-ups: Technical hiring panels frequently probe deeper into concurrency, backward compatibility, or alternative libraries.