Javascript

Responsive Web Development

Clayton Rafael
Frontend Developer & Tech Lead
Formado em sistemas para Internet
Pós-Graduado em Banco de dados

https://www.linkedin.com/in/clayton-rafael/
profclayton.souza@fiap.com.br
pf1874@fiap.com.br
Eventos
JS - O que são eventos
Toda a ação que o usuário realiza em uma página pode gerar um evento.
Desde quando ele carrega a página no navegador até quando move ou clica o mouse em um botão
podemos captar (ouvir) estas ações e criar respostas para estas interações.

Exemplos de Eventos:
Cliques do mouse, pressionamentos de tecla, mudanças de URL, etc.

Por que é importante?

Permite que os scripts reajam a ações dos usuários, como clicar em um botão, inserir texto em um
formulário, etc.
JS - Tipos de Eventos
Exemplos de Eventos:

Eventos do Mouse: click, dblclick, mouseover, mouseout, mousemove, etc.

Eventos de Teclado: keydown, keyup, keypress.
Eventos de Formulário: submit, change, focus, blur.
Eventos da Janela: load, resize, scroll, unload.
Como podemos
escutar um
evento?
JS - Como podemos escutar um evento?
Usando um evento inline

Uma forma básica, embora não recomendada, de capturar uma interação do usuário é implementar o ouvinte
de evento diretamente dentro da tag HTML do elemento relevante.

Reparem que o evento onclick, que aparece em forma de atributo, esta chamando uma linha de comando
javascript, ou seja, quando o evento onclick é executado pelo usuário, quando ele clica no botão, o javascript
capta (escuta) esta ação e executa a ação que está no evento.

OBS. Quando usamos eventos inline que contenham uma string no seu valor, devemos intercalar o uso de das
aspas simples e dupla.
JS - Como podemos escutar um evento?
Atribuindo uma função anônima
Essa maneira atribui uma função anônima ao elemento. A função pode ser anônima, pois só será chamada pelo
evento, ou seja, quando o usuário executar a ação esperada.

HTML

JS

Trabalhando desta forma o código fica mais limpo, pois não temos instruções javascript dentro do nosso
documento HTML.
JS - Como podemos escutar um evento?
Usando a Arrow Function

Outro jeito moderno de usar funções anônimas é com as Arrow Functions. Elas são mais enxutas e práticas.

HTML

JS

Arrow Function simplificada

JS - Como podemos escutar um evento?
Com o Método addEventListener()
Temos uma forma para deixar o código mais organizado, é utilizando o método addEventListener(). Ele é um
método que recebe dois parâmetros: o evento javascript e a função que será executada quando este evento for
executado.

HTML

JS

OBS. Dentro do addEventListener(), os eventos javascript não iniciam com “on”.

JS - Como podemos escutar um evento?
Organizando o código com addEventListener()

HTML

JS
JS - Removendo um evento
Método removeEventListener()
As vezes podemos precisar desativar uma função dependendo da ação do usuário ou por outro critério. Nestes
casos podemos utilizar o método removeEventListener().

É importante notar que para remover um ouvinte de evento com removeEventListener, você precisa passar
a referência exata à função que foi passada para addEventListener. Isso significa que você não pode usar
uma função anônima diretamente com addEventListener se planeja remover o ouvinte mais tarde.
JS - Adicionando eventos em muitos itens
Usando o addEventListener() para um array de elementos
Como já vimos nas aulas anteriores, quando pegamos elementos pela classe ou nome da tag os métodos nos
retornam um array de objetos. Para não termos que atribuir o evento para estes elementos um-a-um podemos
utilizar o foreach.

HTML JS
Alguns eventos
javascript
Eventos de mouse
JS - mouseenter ou onmouseenter
Evento disparado quando o ponteiro do mouse se move para cima de um elemento.

HTML

JS
JS - mouseout ou onmouseout
Evento disparado quando o ponteiro do mouse é movido para fora de um elemento ou um de seus filhos.

HTML

JS
JS - mousedown ou onmousedown
Evento disparado quando o botão do mouse é pressionado sobre um elemento.

HTML

JS
JS - mouseup ou onmouseup
Evento disparado quando o botão do mouse é liberado, soltando, sobre um elemento.

HTML

JS
Eventos de clique
JS - click ou onclick
Evento disparado quando se clica em um elemento.

HTML

JS
JS - dblclick ou ondblclick
Evento disparado quando é aplicado um clique duplo sobre um elemento.

HTML

JS
Eventos de teclado
JS - keydown ou onkeydown
Evento disparado quando o usuário pressiona uma tecla.

HTML

JS
JS - keyup ou onkeyup
Evento disparado quando o usuário libera uma tecla pressionada.

HTML

JS
Eventos de
formulário
JS - focus ou onfocus
Evento disparado quando o elemento recebe o foco, é selecionado.

HTML

JS
JS - blur ou onblur
Evento disparado quando o elemento perde o foco, perde a seleção.

HTML

JS
JS - change ou onchange
Evento disparado quando o conteúdo do elemento é alterado, input, select, textarea.

HTML

JS
JS - submit ou onsubmit
Evento disparado quando o botão submit é clicado para enviar os dados do formulário.

HTML

JS
Event Object
JS - event
O Event Object é um objeto, automaticamente passado para a função de evento e contém informações sobre o
evento que ocorreu.

Propriedades Comuns: type, target, currentTarget, clientX/Y, key, etc.

Pode ser usado para obter informações sobre o evento ou prevenir comportamentos padrão.
JS - Prevenindo o comportamento padrão
Às vezes, queremos prevenir o comportamento padrão de um evento.

HTML

JS
Quero mais!
Curso Javascript (Introdução)
Curso Javascript (métodos de array)
JavaScript para Web: Crie páginas dinâmicas