Os eventos do DOM percorrem a árvore do documento até seu alvo, com uma fase de captura e uma fase de borbulhamento. O comportamento padrão ao se criar um listener com addEventListener
é tratar o evento na fase de borbulhamento. Quando é útil tratar eventos na fase de captura?
1 Resposta
Acredito que isso seja útil para dar aos elementos parent a "palavra final" sobre os eventos que ocorrem nos seus filhos. Isso permite desacoplar uma funcionalidade comum, genérica, que precisa ser implementada em um componente como um todo, das funcionalidades específicas dos seus sub-componentes.
Um caso de uso seria permitir ao parent desabilitar simultaneamente todos os seus descendentes exceto um - por exemplo, numa ajuda interativa, onde os sub-elementos são destacados e explicados um a um, enquanto os demais permanecem inativos. Isso é algo que vêm me quebrando a cabeça há algum tempo, pois antes de ler sua pergunta só conhecia a fase de borbulhamento. E, se levarmos somente ela em consideração, temos duas possibilidades somente:
O parent controla todos os seus descendentes individualmente, aplicando a propriedade
readonly
e/oudisabled
a cada um deles. Isso cria uma dependência complicada, pois sempre que um elemento for acrescentado ou modificado o parent precisa ser adaptado de acordo. Lógicas mais complexas - por exemplo onde os atributos mencionados são alterados programaticamente, ou possuem valores diferentes do padrão - teriam que ser levadas em consideração pelo parent.Cada sub-elemento tem "consciência" do parent e leva seu estado em consideração antes de tratar de cada evento. Na melhor das hipóteses, poderia-se aplicar um decorador a cada event handler dos filhos para implementar a lógica do parent. Teria-se que ter cuidado para não esquecer nenhum deles, e ainda assim ficaria um monte de código repetido por todos esses elementos.
Ou seja, sem essa fase de captura implementar a funcionalidade proposta implica num acoplamento forte entre o parent e seus descendentes. E quando esse parent é "a tela inteira", o código pode ficar bastante complicado... Tratando - e bloqueando - esses eventos na fase de captura evita-se uma relação de dependência desnecessária, permitindo separar a lógica do parent da lógica de cada um dos seus componentes, tornando o programa bem mais modular.
-
3P.S. MUITO OBRIGADO por essa pergunta, resolveu um problema que eu tinha há tempos! E como eu nem sabia que essa funcionalidade existia, não tinha nem como pesquisar/perguntar por ela... (em outras palavras, na minha cabeça os eventos começavam no target e subiam até o
document
, isso era uma noção intuitiva que eu tinha, nunca me ocorreu que na realidade poderia ser diferente...) Commented 15/06/2014 às 6:57 -
1Comigo era o contrário: eu sempre soube das duas fases de propagação, mas nunca tinha achado um uso prático para a captura. Vi seu exemplo na outra pergunta, é um bom uso mesmo! Obrigado! Commented 15/06/2014 às 14:32