Bloco 5.3
0 gostou12 visualizações
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.
Bloco 5.3
- 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