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