Eventos - do simples ao objeto

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

C5df370a883b65279af5a7ca94a5eed7?s=128

Jean Carlo Emer

March 05, 2012
Tweet

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! jeancarloemer@gmail.com @jcemer