Este documento discute eventos no JavaScript e como manipulá-los de três maneiras: 1) usando funções como window.onload para executar código após o carregamento da página, 2) usando addEventListener para anexar escutadores de eventos a elementos e 3) declarando manipuladores de eventos diretamente nos elementos HTML.

1. Bloco 5.3
JavaScript - Eventos
Elaborado por Ruâni Filipe (aluno - Turma 8), com base
em anotações pessoais do assunto, via Course e Aulas
ao Vivo

2. Objetivos:
Mudar o conteúdo/estilo/atributo de
elementos HTML a partir do JS
Aplicar códigos de eventos (click,
change…)

3. Evento, em programação, pode ocorrer de várias formas:
o carregar da página;
o rolar da tela;
o passar do mouse;
o digitar do teclado;
o clicar do mouse.
Eventos

4. O escutador de eventos (ou event listener) é um código
posicionado ao lado de um elemento com a finalidade de executar
uma função pré-determinada ao ouvir o evento.
ex.: função window.onload { (aqui o que será feito após o carregar
da página }
Função (.addEventListener)
nomeVariavel.addEventListener(“nomeEvento, nomeFunção”)
Escutador de Eventos

5. A: função window.onload é um exemplo. Após a engine renderizar
a página HTML, a função atua manipulando os eventos de acordo
com o que foi programada a fazer
Interessante colocar o script.js após essa função, assim garantirá
que o script não atrapalhará na performance de renderização da
página
Manipulação de eventos disparados pelo DOM

6. Por meio do .addEventListener
Função nativa que recebe como parâmetros
.addEventListener(“nomeEvento”,”função”)
nomeEvento -> o evento que se espera escutar (click, change,
mouseover, keydown…)
função -> o que o evento irá ativar
Manipulação de eventos declarados na linha do HTML

7. Para deixar o código HTML mais clean, preferível fazer a
manipulação no arquivo script.js
Apenas exemplificando com getElementById
let nomeVariavel = document.getElementById(“nomeIdAlvo”);
nomeVariavel.addEventListener(“nomeEvento,nomeFunção)
Continua na próxima página ----------------------------------------------------------->
Boa Prática - Manipulação eventos declarados no HTML

8. function nomeFunção(ObjetoEvento){
duas principais propriedades desse Objeto são:
target: elemento que originou o evento (qual linha HTML é o alvo?)
type: o tipo do evento (se foi um click, um scroll, um keydown…)
Obs.: Qualquer elemento HTML pode receber eventos
Boa Prática - Manipulação eventos declarados no HTML

9. Nota-se que a mesma variável tem dois event listener, um evento
“mouseover” e um outro evento “mouseleave”
Múltiplas escutas de evento

10. O CSS dentro de seu arquivo css é definido via kebab case (com
hífens, ex.: margin-left)
Para manipulá-lo no DOM é via camelCase (para lembrar mais
facilmente, lembrar que a manipulação ocorre no script e o JS é
camelCase)
CSS na Manipulação via DOM