JavaScript & HTML - Eventos

[MayLeone]

Introdução:
Bem vindos a mais uma aula de Javascript aqui no blog! Hoje nós vamos abordar o assunto sobre eventos do JS que trabalham em conjunto com o HTML5!

O que são eventos?
De uma forma geral, podemos dizer que os eventos são ''reações'' de elementos HTML referentes a uma interação na página.
Podemos por exemplo, colocarmos um botão na página e fazer com que quando cliquemos no mesmo, uma alert apareça na tela.
Para fazer isso, crie uma estrutura básica de um documento HTML e dentro do corpo da página utilize a tag "button" para criar o botão:



O resultado na página é apenas um simples botão, mas queremos que quando damos um clique sobre ele, apareça um alert na tela.
As tags em HTML além de comportarem os atributos, também podem disparar eventos em Javascript, para tal, basta colocar o nome do evento, e assim como fazemos com o atributo, utilizamos o sinal de igual (=) e entre as aspas duplas iremos inserir a ação a ser disparada pelo evento.
Em Javascript temos alguns eventos padrões que estão disponíveis nativamente pela linguagem, um deles chama-se "onclick", ou seja, alguma ação será executada se o elemento HTML for clicado.
Podemos então complementar a tag button da seguinte forma:



onlick no caso é o nome do evento em Javascript que é disparado assim que o usuário clicar sobre o elemento HTML (no caso, o botão) enquanto dentro das aspas duplas temos a ação que o evento irá acionar, que seria um alert contendo uma mensagem.
Perceba também que o conteúdo do alert dessa vez está escrito entre aspas simples (' '), pois o alert já está inserido entre aspas duplas.
Salve e atualize a página, veja que ao clicar no botão, a mensagem aparece, teste você mesmo:

Clique aqui para testar!

Chamar funções através de eventos:
Esta ação disparada (o alert) foi uma ação inline, ou seja, foi acionada na própria linha de ação do evento, mas caso queiramos desenvolver algo mais complexo podemos criar uma função que seja chamada através do evento, dessa forma, teremos um bloco de código mais completo e com mais comandos para que possamos desenvolver algo além de um alert na tela.
Podemos por exemplo, contabilizar quantas vezes o botão foi clicado, para isso, vamos criar um parágrafo que irá conter o texto, e dentro desse parágrafo criaremos um container inline (um span) que vai mostrar o valor de uma variável javascript que armazenará a quantidade de vezes que o botão foi clicado.
Para este span ser identificado no código javascript, podemos colocar um ID a ele:



Criaremos agora o bloco de script da página, definindo dentro dele uma variável chamada "quantidadeCliques" inicializando em zero, e uma função chamada "ContarCliques" que vai novamente exibir o alert e incrementar a variável "quantidadeCliques":



Agora podemos chamar na tag "button" a função "ContarCliques" no evento:



Perceba que se você testar, o alerta é mostrado, mas o texto do parágrafo não é alterado.
Para alterar o texto dentro do span e mostrar o valor da variável "quantidadeCliques" basta utilizar uma função em javascript que temos em "document" que é "getElementById" (obter elemento pelo id). Essa função nos retorna o elemento com o id informado, dessa forma, podemos manipular os atributos e até mesmo os conteúdos filhos daquele elemento referido, no caso, queremos mudar o conteúdo filho do span de id "registro-cliques", para isso, basta pegar (get) esse elemento através do id, e então alterar seu inner(conteúdo filho) para o valor da variável, assim:



Teste você mesmo o efeito apresentado:

Clique aqui para testar!

Alterando atributos via eventos:
Você viu mais acima que podemos chamar funções e também alterar elementos filhos de tags utilizando os eventos, agora veremos um exemplo onde podemos alterar atributos de elementos HTML com os eventos através de funções.
Apague o conteúdo script e do corpo da página para que possamos prosseguir com o exemplo.
Vamos agora utilizar uma imagem para exemplificar as ações via eventos, para isso, salve na pasta do seu arquivo HTML duas imagens: eu salvarei as imagens de dois emojis da internet, ambos com as mesmas dimensões e em formato .png:



Iremos fazer o seguinte: quando o usuário passar o mouse sob a imagem do emoji irritado, a imagem irá mudar para o emoji apaixonado, e assim que o usuário retirar o mouse dessa imagem, será mostrado novamente a imagem do emoji bravo.
Para tais ações, vamos utilizar dois eventos nativos em javascript: onmousemove (que vai ser disparado quando o usuário passar o mouse sob o elemento HTML) e onmouseout (que vai disparar quando o mouse não estiver mais sob o elemento).

Então crie a tag "img" com inicialmente a imagem do emoji bravo e defina esses dois eventos, onde cada um deles irá mostrar um arquivo src diferente, de acordo com a situação:



Perceba a palavra reservada "this" no código. Essa palavra indica que nós iremos alterar os atributos do elemento daquela tag em específico, ou seja, iremos alterar o valor do src daquela própria tag que possui os eventos definidos.

Teste você mesmo, passe o mouse sob a imagem:

Clique aqui para testar!

Também podemos realizar esse processo (alteração de atributos de um elemento em HTML) de forma externa, chamando funções ao disparar tais eventos (como visto mais acima), por exemplo:
Iremos atribuir um id para essa tag de imagem chamado de "emoji" e criaremos dentro de um bloco script a função que faz a alteração da imagem, recebendo como parâmetro justamente a imagem a ser alterada:



Salve e atualize a página e perceba que o efeito continua o mesmo visualmente, mas no código nós fizemos a alteração do atributo 'src' da tag img externamente através de uma função javascript, o que pode ser útil a você em casos que essas alterações devam ocorrer externamente num bloco de comandos mais complexos, ao invés de um comando inline, onde apenas utilizamos a palavra reservada 'this' para alterar o atributo da tag, como visto anteriormente.

Alternando vários elementos ao mesmo tempo:
Como sabemos, um elemento com id pode ser considerado único, por isso a função "getElementById" nos retorna apenas o elemento HTML com o id referido. Mas caso queiramos que vários elementos sejam alterados de forma similar ao mesmo tempo, podemos utilizar as classes.
Vamos salvar mais duas imagens de emojis na pasta onde se encontra o arquivo HTML para exemplificar o tutorial:



Agora vamos criar 4 elementos HTML com a tag img com a imagem do emoji "emoji-happy" e vamos defini-los com uma classe chamada "grupo-emojis". O que faremos é: iremos mudar a imagem de todos esses elementos ao mesmo tempo para a imagem "emoji-kiss" quando o usuário clicar sobre qualquer um dos 4 elementos, para isso vamos utilizar o evento "onclick" do javascript, e uma função chamada "ClicarEmojis" para mudarmos o src dos elementos:



Preste atenção apenas na definição da primeira tag img, as demais são apenas cópias para exibir mais três imagens iguais.

Como essas 4 tags estão definidas como classes, elas serão uma lista de elementos, e não um elemento único como o caso de ids, portanto, utilizar o "getElementById" não vai funcionar, para isso, precisamos utilizar a função "getElementsByClassName" que vai nos retornar um array dos elementos que contém essa classe como atributo:



Agora podemos através do array "listaEmojis" alterar o atributo src de cada um dos elementos, para o conteúdo da variável "diretorio" que contém o caminho para a imagem 'emoji-kiss':



Melhor ainda ficaria o código com um laço de repetição:



Podemos até criar uma variável para controlar os cliques do usuário, para que as imgs recebam novamente a imagem do emoji ''happy'' no próximo clique:



Teste você mesmo:

Clique aqui para testar!

Finalização:
E aqui chega mais um final de aula aqui no fórum!
Ela foi destinada a introdução dos atributos de eventos em javascript e como eles podem ser disparados de diversas formas em nosso documento, mas ainda teremos outras aulas sobre este assunto, pois temos outras funcionalidades para destacarmos ainda (como adicionar um evento a um componente com JavaScript sem necessitar do HTML, através da função EventListener), portanto te vejo nas próximas aulas, até lá!