JavaScript - 5. Eventos



Toda página HTML possui eventos, seja eles de clique, de carregamento da página, de até mesmo pressionar alguma tecla no teclado. Há eventos de clique, do cursor do mouse passando por um determinado objeto, ou saindo, e etc.

Estes eventos podem ser usados para interagir de forma dinâmica com o usuário diretamente a partir do código HTML.

Veja por exemplo, um combo seletor de links, que permite abrir e ao clicar em algo, executará o código imediatamente:
<select onchange="window.open(this.value);">
   <option selected="selected" disabled="disabled" value="">-- Selecione --</option>
   <option value="http://www.ig.com.br/">Portal iG</option>
   <option value="http://www.uol.com.br/">Universo Online</option>
</select>
Isto irá fazer um seletor, que ao clicar, poderá selecionar itens, e ao clicar, irá acionar um código javascript com base no evento "onchange":


Ao clicar em Portal iG ou Universo Online, uma nova janela será aberta, pois causará a ação de onchange no elemento HTML.

Veja quais são os outros eventos que poderá adicionar em algum elemento HTML:

onclick = Quando se clica no objeto.
onchange = Quando o elemento HTML foi alterado, geralmente campos de texto, seletores, quando se perde o foco. Ex.: Um campo de texto livre, só ocorrerá onchange quando a pessoa clicar fora do elemento, em qualquer outro lugar da tela, ou pressionar TAB, que seguirá para um próximo elemento.
onmouseover = Quando o cursor do mouse estiver passando sobre o objeto, mas sem clicar.
onmouseout = Quando o cursor do mouse saiu de determinado objeto.
onmouseup = Quando o mouse estiver com o clique sendo liberado, ou seja, quando o botão do mouse estiver subindo.
onmousedown = Quando o clique do mouse acabou de ser acionado, ou seja, o botão de clique está para baixo, o evento ocorre antes mesmo da pessoa soltar o clique. No exemplo acima, seria impossível selecionar algum elemento, já que iria acionar o evento antes mesmo de abrir a caixa de seleção.
onkeydown = Quando alguma tecla do teclado for pressionada.
onkeyup = Quando alguma tecla do teclado for liberada após ser pressionada.
onfocus = Quando algum elemento recebe destaque, por exemplo: quando você faz um TAB, o navegador começa a navegar selecionando objetos para que você possa interagir usando o próprio teclado. Quando o elemento recebe o foco, esta ação é acionada. Isto também ocorre ao clicar com o mouse, e por exemplo, arrastar o ponteiro e soltar o botão, evitando a ação de clique, mas não evita do elemento receber foco.
onblur = Semelhante ao onfocus, mas é acionado apenas ao perder o foco. Caso seja um campo de texto, e ele não tenha sido alterado, apenas onblur será acionado, mas caso tenha conteúdo alterado, tanto onblur como onchange serão acionados.
onload = Geralmente usado para a tag body do HTML para saber quando a página terminou de carregar todos os itens, códigos e imagens.
onmessage = Existe um recurso de enviar mensagens entre sites, usados geralmente entre quadros diferentes, como iframes, ou uma janela aberta por javascript. A mensagem é enviada para o domínio e a página aberta dentro deste domínio, receberá o evento de onmessage, onde poderá obter do evento alguma mensagem recebida. Isto pode ser comum se você tem duas aplicações em domínios diferentes, e precisa que via front-end, um site se comunique com o outro caso ambos estejam abertos ao usuário para realizar alguma ação.
onsubmit = Geralmente usados em formulários usando a tag form do HTML.

Dentro do código JavaScript, pode-se capturar o evento usando o elemento event.

<body onload="console.log(event);"></body>

Isto irá reproduzir no console do navegador:

Event {isTrusted: true, type: "Load", target: document, currentTarget: Window, ...}

Ou seja, se utilizar event.isTrusted, irá obter o valor boleano true.

Para ver quais são os eventos possíveis para um determinado elemento, pode utilizar o console de desenvolvedor no Google Chrome, e em elementos:



Aqui ficam todos os eventos possíveis, e conforme o tempo, eles podem ser alterados, ou conforme alguns frameworks que utilize, alguns eventos podem ser criados para determinados objetos, tags, e elementos no HTML.

Até então, vimos como referenciar eventos com base em uma tag html existente no código, mas há também como referenciar e verificar eventos sem alterar absolutamente nada no HTML.

document.addEventListener('click',function(){console.log("olá!")});

Isto fará que qualquer parte do documento ao ser clicado, ocorrerá no console a saída do texto "olá!".

document.onclick = function() { console.log("olá !!!") }

Isto fará também a mesma coisa, porém, o eventListener e o onclick serão executados em paralelo, caso sejam inclusos, ou seja, sempre no console teremos as duas saídas:

olá!
olá !!!

Se executar-mos a seguinte instrução novamente, estaremos alterando a ação:

document.onclick = function() { console.log("olá !!! 2") }
Saída:
olá!
olá !!! 2
O valor "olá !!!" anterior, foi substituído pelo "olá !!! 2", pois o elemento document.onclick é na realidade um elemento que existe no HTML, e ele foi modificado, substituído, já que é, como vimos em variáveis, atribuiu um evento a ao elemento, e no momento do evento, ele irá chamar a função de document.onclick(), que por sua vez, só pode ter 1 valor por vez. Mas isto é diferente nesta ocasião:

document.addEventListener('click',function(){console.log("olá 3!")});
Neste caso, a saída será:
olá!  //---> Primeiro EventListener
olá !!! 2 // ---> document.onclick()
olá 3! // ---> Segundo EventListener
Criar um listener, ou "ouvinte", não substitui ou remove os anteriores, pois eles serão anexados a um escopo específico que ficará ouvindo os eventos daquele elemento.

Pode-se adicionar listeners de vários tipos de eventos, múltiplos eventos para mesmo elemento, mas há um porém: se houver algum erro de JavaScript em alguma das funções caso hajam vários listeners para o mesmo elemento, todos até o erro serão executados, e todos os demais não serão executados mais. Todos eles serão executados na ordem em que foram criados.

Comentários