[ITEM 2] QUESTION: Что такое event bubbling и capturing?

Understanding event propagation mechanisms in the browser environment is critically important for working effectively with user input in JavaScript. When an event, such as a mouse click, occurs on an element, the browser initiates a process where the event travels through the entire DOM tree, consisting of two consecutive phases: capturing and bubbling.

The first phase is called capturing. At this moment, the event begins its journey from the root window object down through all intermediate parent elements straight to the target element where the action occurred. By default, event listeners do not fire during this phase; however, a developer can explicitly instruct the browser to intercept events during the capturing phase. To do this, when registering a handler via the addEventListener method, the boolean value true or an object with the option capture: true is passed as the third argument.

The second and main phase is called bubbling. It begins immediately after the event reaches the target element. At this stage, the event starts moving in the opposite direction—from the target element up to its parents, rising all the way to the document and window objects. By default, all standard events in JavaScript operate precisely in the bubbling mode, which allows handling actions at higher levels of the hierarchy.

Special tools are provided to manage this process. For example, the event.stopPropagation() method, called inside an event handler, completely stops the further propagation of the event up or down the DOM tree, preventing similar handlers on parent elements from firing. This is often necessary in complex interfaces when a click on a child button should not trigger a click on the surrounding card.