Eventos - do simples ao objeto

Transcript

1. Eventos do simples ao objeto

2. Jean Carlo Emer Desenvolvedor front-end na Grifo Bacharelando em Ciências

   da Computação na UFRGS

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. “ “

4. Programação orientada a eventos Controle de fluxo guiado por indicações

   externas. Desenvolvimento de sistemas de interface com o usuário.

5. Programa é um grande laço dividido em duas etapas: 1.

   Detecção de eventos 2. Tratamento dos mesmos Programação orientada a eventos

6. Atividades externas assíncronas precisam ser inseridas no fluxo síncrono de

   execução do programa. “ “

7. Eventos no Javascript vamos agora ao que interessa

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

   link.

9. Event handler attribute Esta abordagem não permite que seja inserido

   mais de um tratador que responda a onClick.

10. Modelo tradicional Permite gerenciar eventos sem escrever HTML.

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

12. W3C / DOM Level 2 Event Passamos a chamar os

    eventos apenas como click, scroll...

13. W3C / DOM Level 2 Event Os tratadores podem ser

    removidos informando a função original que foi associada ao evento.

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

    do browser

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, ...

16. Outros “novos” eventos Gecko DOMContentLoaded Touch touch[start || end ||

    enter || leave || move || cancel] Drag drag, drag[start || enter || leave || over || end], drop

17. Aos problemas...

18. jQuery Cross-browser

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

20. Bubbling Basta um dos tratadores retornarem false pra que a

    ação padrão do browser e o bubbling seja cancelado.

21. Pegadinha :/

22. Trigger e eventos customizados Qualquer nome pode ser dado aos

    eventos. Trigger permite disparar eventos padrões e criados pelo usuário.

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

24. Unbinding Remove todos os tratadores de click. Remove todos os

    tratadores com namespace navigation.

25. Event delegation

26. Utilidades Retorna um objeto com todos os eventos associados ao

    document. Adiciona um tratador que poderá ser disparado uma única vez.

27. Event Emitter 2 Eventos em qualquer objeto

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

29. Binding e emit

30. Namespaces

31. Obrigado! [email protected] @jcemer