Eventos - do simples ao objeto

Slide 1

Slide 1 text

Eventos do simples ao objeto

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Eventos no Javascript vamos agora ao que interessa

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Modelo tradicional Permite gerenciar eventos sem escrever HTML.

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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, DOMAttrModiﬁed, ...

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Aos problemas...

Slide 18

Slide 18 text

jQuery Cross-browser

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Pegadinha :/

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Event delegation

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Event Emitter 2 Eventos em qualquer objeto

Slide 28

Slide 28 text

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