#14 JSSP - VANILLA JS
EVENT DELEGATION
whoami
Willian Viana (Dreads)
@willian_batista_
github.com/willian-viana
Desenvolvedor Frontend na @LeroyMerlinBRA
Fanboy de JavaScript e Star Wars.
AGENDA
- O que é event delegation
- Como utilizar este Pattern no Vanilla
- Conceito de Event Propagation
- Restrições e boas práticas
O que é Event Delegation?
jQuery says:
Event Delegation nos permite anexar um único 'event listener', a um elemento pai, que será acionado para todos os descendentes que correspondem a um seletor, independentemente de esses descendentes existirem agora ou serem adicionados no futuro.
Mas por que meu click no botão aciona o evento da <div>?
Event Propagation
A magia de disparar eventos bidirecionalmente
Fases
1. Capture
2. Target
3. Bubbling
Blza fera, mas eu não quero disparar todos os meus listeners!
Event.stopProgation()
stopImmediateProgation()
Interrompe o processo de propagação para o próximo elemento pai.
Interrompe o processo de propagação para os possíveis elementos irmãos.
Restrições, boas práticas e performance
Event Delegation com o listener no <body> ouvindo tudo, jamais será uma boa prática.
Se seguirmos princípios de one way data flow, Event Delegation talvez não favoreça a implementação do conceito
ANY QUESTIONS?
Vanilla JS - Event Delegation
By Willian Viana
Vanilla JS - Event Delegation
Um pouco do poder desse Pattern implementado no Vanilla JS.
