Hey.

I do not understand why they invented the ascent phase and the capture phase for events. The early DOM 0 event model was clear: clicked on the node object and executed some piece of code (which was stuffed into a function). and all and with these ascents and interceptions I don’t understand why they were invented at all. What is the point of affecting SEVERAL pieces of code (handler functions) in ONE event? What are the most simple and well illustrative examples of this?

    1 answer 1

    The simplest and most frequently used example is the delegation of events . You install one event handler on the parent element, and inside you check the real target element of the event and react accordingly.

    This not only saves memory (one handler instead of many), but also handles events on dynamically created elements without assigning a handler to them.

    And here is a simple example of using multiple handlers for the same event:

    Ascent is convenient. Do not stop it without obvious need, obvious and architecturally transparent.

    Often, the cessation of ascent creates its pitfalls, which then have to bypass.

    For example:

    1. We make the menu. It handles clicks on its items and makes stopPropagation for them. It seems to be working.

    2. Later we decided to track all the clicks in the window, for some of its functionality, for example, for statistics - where in general people click with us. For example, Yandex.Metrika does this if you enable the corresponding option.

    3. Over the area where the clicks are killed stopPropagation, the statistics will not work! It turned out "dead zone". The problem is that stopPropagation kills every opportunity to track the event from above, and this is necessary for the realization of something “such” that has nothing to do with the menu.

    A source