Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Jean Carlo Emer

March 05, 2012
Tweet

More Decks by Jean Carlo Emer

Other Decks in Programming

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!
    [email protected]
    @jcemer

    View Slide