Event Bubbling and Event Capturing
Event bubbling and event capturing are two phases of how events propagate through the DOM (Document Object Model) in a web page. Understanding these helps you manage how and when event handlers are triggered.
Event Propagation Overview-
When an event (like a click) occurs on a DOM element, it doesn’t just affect that element — it goes through a process called event propagation, which consists of:
1. Capturing phase (a.k.a. capture phase)
2. Target phase
3. Bubbling phase
Event Capturing (Trickling Down)
1. Starts from the document/root and moves down the DOM tree to the target element.
2. Event listeners set with the capture option (true) are triggered during this phase.
3. Less commonly used.
Target Phase
1. The event reaches the target element.
2. Listeners attached directly to the target are triggered here.
Event Bubbling (Bubbling Up)
1. After the target phase, the event bubbles up from the target element to the root.
2. This is the default phase most developers use.
3. Listeners are triggered on ancestors, starting from the target's parent up to the document.
#javascript #javascripttutorial #javascriptinterview #html #css #typescript #fundamentals #react #reactjs #tutorial #interview #interviewquestions #interviewtips #tips #tipsandtricks #frontend #dom #eventlistener #propagation #eventcapturing #eventbubbling