12
The events of the DOM traverse the document tree up to his target, with a phase of catching and a phase of bubbling. The default behavior when creating a Listener with addEventListener is to treat the event in the bubbling phase. When it is useful to treat events in the catching phase?
7
I believe this is useful to give the elements Parent the "final word" about the events that occur in your children. This allows decoupling a common, generic functionality that needs to be implemented into a component as a whole from the specific functionalities of its sub-components.
A use case would be to allow the Parent disable all their descendants simultaneously except one - for example, in an interactive help, where sub-elements are highlighted and explained one by one, while the others remain inactive. That’s something that have been cracking my head for some time, because before reading your question only knew the phase of bubbling. And, if we take only it into account, we have two possibilities only:
The Parent controls all its descendants individually, applying the property readonly and/or disabled to each of them. This creates a complicated dependency, as whenever an element is added to or modified the Parent needs to be adapted accordingly. More complex logics - for example where the attributes mentioned are programmatically altered, or have values different from the standard - would have to be taken into account by Parent.
Each sub-element has "consciousness" of the Parent and takes its status into account before dealing with each event. At best, one could apply a decorator to each Event Handler to implement the logic of Parent. One would have to be careful not to forget any of them, and yet it would be a lot of code repeated by all these elements.
That is, without this capture phase implementing the proposed functionality implies a strong coupling between the Parent and their descendants. And when Parent is "the whole screen", the code can be quite a lot complicated... Treating - and blocking - these events in the capture phase avoids an unnecessary dependency relationship, allowing to separate the logic from the Parent the logic of each of its components, making the program much more modular.
Browser other questions tagged javascript dom events
You are not signed in. Login or sign up in order to post.
P.S. THANK YOU SO MUCH for that question, solved a problem I had long ago! And since I didn’t even know that this functionality existed, I couldn’t even search/ask for it... (in other words, in my head events started in the target and went up to the
document, That was an intuitive notion that I had, it never occurred to me that it might actually be different...)– mgibsonbr
With me it was the opposite: I always knew of the two phases of propagation, but had never found a practical use for capture. I saw your example in the other question, it’s a good use even! Thank you!
– bfavaretto