Eventos - do simples ao objeto

Uma análise sobre o funcionamento e uso de eventos na prática. Foco no paradigma de eventos, DOM, jQuery e uma implementação usando EventEmitter2. Palestra apresentada no ano de 2012 na primeira edição do http://rsjs.org

Transcript

1. Eventos
   do simples ao objeto
   

   View Slide

2. Jean Carlo Emer
   Desenvolvedor front-end na Grifo
   Bacharelando em Ciências da
   Computação na UFRGS
   

   View Slide

3. Precisamos detectar o que o
   usuário está fazendo e em
   que estado ele se encontra.
   Para isso, usamos o que
   chamamos de event handlers.
   “
   “
   

   View Slide

4. Programação orientada a eventos
   Controle de fluxo guiado por
   indicações externas.
   Desenvolvimento de sistemas de
   interface com o usuário.
   

   View Slide

5. Programa é um grande laço
   dividido em duas etapas:
   1. Detecção de eventos
   2. Tratamento dos mesmos
   Programação orientada a eventos
   

   View Slide

6. Atividades externas
   assíncronas precisam ser
   inseridas no fluxo
   síncrono de execução do
   programa.
   “
   “
   

   View Slide

7. Eventos no Javascript
   vamos agora ao que interessa
   

   View Slide

8. Event handler attribute
   Um alert é disparado ao clicar no link.
   

   View Slide

9. Event handler attribute
   Esta abordagem não permite que seja inserido mais de um
   tratador que responda a onClick.
   

   View Slide

10. Modelo tradicional
    Permite gerenciar eventos sem escrever HTML.
    

    View Slide

11. Modelo tradicional
    Exemplo de remoção do tratador de evento
    

    View Slide

12. W3C / DOM Level 2 Event
    Passamos a chamar os eventos apenas como click, scroll...
    

    View Slide

13. W3C / DOM Level 2 Event
    Os tratadores podem ser removidos informando a função
    original que foi associada ao evento.
    

    View Slide

14. Bubbling
    stopPropagation
    cancela o bubbling
    preventDefault
    cancela a ação
    padrão do
    browser
    

    View Slide

15. Eventos do DOM
    Mouse click, mouse[down || up || over || ...]
    Keyboard key[down || press || up], ...
    HTML load, unload, resize, scroll, ...
    Form select, change, submit, focus, blur, ...
    Mutation DOMNodeInserted, DOMNodeRemoved,
    DOMAttrModified, ...
    

    View Slide

16. Outros “novos” eventos
    Gecko DOMContentLoaded
    Touch touch[start || end || enter || leave || move || cancel]
    Drag drag, drag[start || enter || leave || over || end], drop
    

    View Slide

17. Aos problemas...
    

    View Slide

18. jQuery
    Cross-browser
    

    View Slide

19. Binding
    Padroniza vários propriedades dos eventos entre os
    browsers.
    

    View Slide

20. Bubbling
    Basta um dos tratadores retornarem false pra que a ação
    padrão do browser e o bubbling seja cancelado.
    

    View Slide

21. Pegadinha :/
    

    View Slide

22. Trigger e eventos customizados
    Qualquer nome pode ser dado aos eventos.
    Trigger permite disparar eventos padrões e criados pelo
    usuário.
    

    View Slide

23. Namespaces
    Namespaces facilitam o disparo e remoção dos eventos.
    

    View Slide

24. Unbinding
    Remove todos os tratadores de click.
    Remove todos os tratadores com namespace navigation.
    

    View Slide

25. Event delegation
    

    View Slide

26. Utilidades
    Retorna um objeto com todos os eventos associados ao
    document.
    Adiciona um tratador que poderá ser disparado uma única
    vez.
    

    View Slide

27. Event Emitter 2
    Eventos em qualquer objeto
    

    View Slide

28. Criação
    Usamos o construtor para iniciar um server.
    https://github.com/hij1nx/EventEmitter2
    

    View Slide

29. Binding e emit
    

    View Slide

30. Namespaces
    

    View Slide

31. Obrigado!
    jeancarloemer@gmail.com
    @jcemer
    

    View Slide