#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

  1. O que é event delegation
  2. Como utilizar este Pattern no Vanilla
  3. Conceito de Event Propagation
  4. 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?

Made with Slides.com