Eventos de formulário: onfocus e onblur (focus e blur)

Neste tutorial, iremos aprender dois importantes eventos para se trabalhar com formulários em HTML e JavaScript o onblur e o onfocus (ou só focus e blur em event handler).

• Apostila de JavaScript completa em PDF

Eventos onfocus e onblur de Formulários

O evento onfocus dispara quando algum tipo de formulário (como input) está selecionado, ou seja, quando estamos usando ele, clicamos, digitamos ou estamos exercendo alguma ação nele.

Já o evento onblur ocorre quando 'saímos' desse formulário.

Por exemplo, no código abaixo, se você clicar no formulário de input,  o evento onfocus vai chamar a função dentro(), que pinta de vermelho o fundo do input, e quando você clicar fora do formulário, o evento onblur dispara e é acionada a função fora() que exibe pinta o inpt em azul:

Código HTML:

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
 <head>
    <title>Apostila JavaScript Progressivo</title>
    <script type="text/javascript" src="script.js"></script>
 </head>
 <body>
 Clique dentro e fora:<input type="text" id="meuInput" 
                onfocus="dentro()" onblur="fora()">
 </body>
</html>

script.js:

function dentro()
{
   document.getElementById("meuInput").style.background = "red";
}

function fora()
{
   document.getElementById("meuInput").style.background = "blue";
}

Resultado:

---

Clique dentro e fora:

---

Event Handler: focus e blur

Os eventos se chamam onfocus e onblur na forma de propriedade de um elemento do HTML.
Se desejar trabalhar com estes eventos via JavaScript puramente, pelos event handlers e método addEventListener, os nomes são focus e onblur.

Veja como ficaria o exemplo anterior.
Código HTML:

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
 <head>
    <title>Apostila JavaScript Progressivo</title>
    <script type="text/javascript" src="script.js"></script>
 </head>
 <body>
 Clique dentro e fora:<input type="text" id="meuInput">
 </body>
</html>

script.js

window.onload = function(){
   function dentro()
   {
 document.getElementById("meuInput").style.background = "red";
   }

   function fora()
   {
 document.getElementById("meuInput").style.background = "blue";
   }

   document.getElementById("meuInput").addEventListener("focus", dentro);
   document.getElementById("meuInput").addEventListener("blur", fora);
}

Certamente você já viu esse tipo de efeito ao preencher algum formulário, principalmente aqueles grande, com vários campos.

Se você for criar um sistema que possui diversos formulários, é sempre interessante usar focus e blur, visto que facilitam para o usuário saber em que campo dos formulários ele está situado, isso o ajuda a não se perder e seu projeto terá uma cara mais profissional.

Eventos de Teclado - onkeydown, onkeyup e onkeypress

Neste tutorial de JavaScript, vamos aprender a detectar eventos de teclado, como onkeydown, onkeyup e o onkeypress.

• Fazer download da apostila

Eventos de teclado: onkeydown, onkeyup e o onkeypress

Assim como os eventos de mouse, de apertar o botão do mouse, soltar e clicar, existe o mesmo para o caso de teclas do seu teclado.

O onkeywdown detecta quando a tecla é pressionada (bem rápido)
O onkeyup é o evento que detecta o contrário, quando você solta a tecla.
E o onkeypress é o de apertar uma teclada como ALT, CONTROl ou SHIFT.

O primeiro evento a ocorrer no processo de digitar uma tecla é o onkeydown, depois imediatamente onkeypress, então o sistema captura a teclada e depois ocorre o onkeyup.

No exemplo abaixo, um código simples que mostra "DOWN" quando estamos apertando uma tecla e mostra o texto "UP" quando soltamos:

Código HTML:

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
 <head>
    <title>Apostila JavaScript Progressivo</title>
    <script type="text/javascript" src="script.js"></script>
 </head>
 <body>
 Digite algo: <input type="text" id="caixa" onkeydown="down()"  onkeyup="up()">
 <div id="status"></div>

 </body>
</html>

script.js:

function down()
{
 document.getElementById("status").innerHTML="DOWN";
}

function up()
{
 document.getElementById("status").innerHTML="UP";
}

Resultado:

---

Digite algo:

---

Existe muita teoria e coisas complicadas por trás do uso da onkeypress, principalmente junto da onkeydown, então quem quiser saber em mais detalhes, veja aqui uma boa discussão:
https://stackoverflow.com/questions/3396754/onkeypress-vs-onkeyup-and-onkeydown

Se quisermos usar event handlers, basta usarmos os eventos com os nomes keydown, keypress e keyup. Nosso código JavaScript ficaria:

window.onload = function(){
 function down()
 {
  document.getElementById("status").innerHTML="DOWN";
 }

 function up()
 {
  document.getElementById("status").innerHTML="UP";
 }
 
 document.getElementById("caixa").addEventListener("keydown", down);
 document.getElementById("caixa").addEventListener("keyup", up);
}

O HTML é fica mais simples:

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
 <head>
    <title>Apostila JavaScript Progressivo</title>
    <script type="text/javascript" src="script.js"></script>
 </head>
 <body>
 Digite algo: <input type="text" id="caixa">
 <div id="status"></div>

 </body>
</html>

Detectando uma tecla pressionada

Uma importante funcionalidade é saber que tecla foi digitada, ou seja, qual foi pra baixo (keydown).
Para saber, basta usar a propriedade key do objeto event.

No exemplo abaixo, vamos criar um script que detecta quando você digita alguma vogal: a, e, i, o ou u

Código HTML:

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
 <head>
    <title>Apostila JavaScript Progressivo</title>
    <script type="text/javascript" src="script.js"></script>
 </head>
 <body>
 Digite algo: <input type="text" onkeydown="detecta(event)">
 </body>
</html>

script.js:

function detecta(event)
{
    var tecla = event.key;
    if (tecla == "a")
     alert ("Você apertou 'a'");
 if (tecla == "e")
     alert ("Você apertou 'e'");
 if (tecla == "i")
     alert ("Você apertou 'i'");
 if (tecla == "o")
     alert ("Você apertou 'o'");
 if (tecla == "u")
     alert ("Você apertou 'u'");
}

Note que, na propriedade onkeydown chamamos a função detecta() e passamos como argumento o objeto event. Esse objeto está cheio de informações importantes.

Uma delas, é a propriedade key: event.key
Nela, fica armazenada a tecla que você pressionou.

Basta agora comparar com 'a', 'e', 'i', 'o' ou 'u' para saber qual  foi pressionada.

Propriedades do objeto KeyboardEvent

Quando pressionamos uma tecla, um objeto especial é criado, é do tipo KeyboardEvent e ele possui diversas propriedades e métodos. No tópico anterior, usamos a propriedade key para detectar qual tecla foi digitada.

Existem diversas outras, e é importante você ter ao menos noção dos tipos de eventos que pode se trabalhar com seu teclado, caso um dia precise de algo, veja:

• altKey - Retorna se ALT foi pressionada
• charCode - Retorna o código unicode do caractere digitado
• code - Retorna o código da tecla pressionada (cada tecla tem seu número, seu código)
• ctrlKey - Retorna se a tecla CTROL foi pressionada
• getModifierState() - Retorna se determinada teclada está ativada
• key - Retorna a teclada digitada e detectada pelo evento
• keyCode - Retorna o código Unicode da tecla que disparou o evento onkeypress, ou onkey down ou onkeyup
• location - Retorna a localização da tecla no teclado
• metaKey - Retorna se uma tecla "meta" foi pressionada
• repeat - Retorna se uma teclada está sendo mantida pressionada ou não
• shiftKey - Retorna se a tecla SHIFT foi pressionada ou não

Para saber em mais detalhes sobre cada uma dessas propriedades ou método:
https://www.w3schools.com/jsref/obj_keyboardevent.asp

Tratando Eventos (Event Handler) e o método addEventListener

Neste tutorial de nossa apostila de JavaScript, vamos aprender como trabalhar com os tratadores de eventos (event handlers) através do método addEventListener(), do JS.

• Estudar pela Apostila (Download do PDF)

Tratadores de Eventos - Event Handlers

Até o momento, durante nossos estudos de Eventos em JavaScript, estávamos lidando com os eventos a partir de atributos no código HTML.

Veja o exemplo do tutorial anterior, sobre Eventos envolvendo o Mouse, em um código de botão em HTML:

<button onmousedown="aperta()" 

        onmouseup="solta()" 

        onclick="clica()">

        Clique neu!</button>

Só aí temos três atributos lidando com eventos: onmousedown, onmouseup e onclick.

Mas além de ser desagradável para muitos programadores ficar misturando código JS dentro de HTML, isso tem uma limitação: você só pode associar uma função para um evento, apenas.

Porém, muitas vezes se faz necessário vários eventos, num mesmo elemento.

Por exemplo, ao passar o mouse pelo botão talvez você queira que ele mude de cor ou passo que exiba um alert: "Tem certeza que deseja apertar esse botão? Mwahahaha"

Para isso, precisamos trabalhar com 'tratadores de eventos', do inglês event handlers, que nada mais são que funções que vão tratar eventos, mas agora direto no código JavaScript.

O Método addEventListener

Para trabalharmos com event handler, precisamos associar uma função a determinado elemento. O nome disso é registrar o tratador de eventos e isso é feito com o método addEventListener, que tem a seguinte sintaxe:

elemento.addEventListener(evento, nome_da_função, false ou true)

Por exemplo, vamos criar um botão simples, cujo código HTML é:

<button id="meuBotao">Clique!</button>

Assim, seu nome (id), é "meuBotao".

Agora vamos no JavaScript e vamos 'pegar esse botão':

document.getElementById("meuBotao")

Neste elemento, vamos usar o método addEventListener, para toda vez que o evento "click" ocorrer, ele chame a função clique, veja o código completo:

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
 <head>
    <title>Apostila JavaScript Progressivo</title>
    <script type="text/javascript" src="script.js"></script>
 </head>
 <body>
 <button id="meuBotao">Clique aqui</button>
 <script>
  document.getElementById("meuBotao").addEventListener("click", clique);

  function clique() {
    alert("Clicou!");
  }
</script>
 </body>
</html>

Rode e faça o teste.

Tratamento de eventos em arquivo externos

No exemplo anterior, fizemos com o script dentro do documento HTML direto.

Se tentar colocar o código JS num arquivo externo, como script.js, vai ver que não funciona.

Isso ocorre por o script não foi 'carregado' (load).

Para carregarmos, basta fazermos: windows.load = function (){ código JS}

Vamos ver o código do exemplo anterior, com o código JavaScript num arquivo externo.

HTML:

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
 <head>
    <title>Apostila JavaScript Progressivo</title>
    <script type="text/javascript" src="script.js"></script>
 </head>
 <body>
 <button id="meuBotao">Clique aqui</button>
 </body>
</html>

script.js:

window.onload = function(){
 function minhaFuncao(){
     alert("Clicou!");
 }
 
 document.getElementById("meuBotao").addEventListener('click', minhaFuncao, false);
}

O que ocorre aqui é que, ao terminar de carregar a janela (windows.load), ele vai automaticamente carregar o arquivo externo, sem ele, nosso tratador de eventos não funciona, pois ninguém carregou o script.js antes.

Lista de eventos para usar na addEventListener():

https://developer.mozilla.org/pt-BR/docs/Web/Events

Eventos de Mouse - onmousedown, onmouseup, onclick, onMouseOver e onMouseOut

Neste tutorial de nosso curso de JavaScript, vamos aprender 5 importantes eventos de mouse: onmousedown, onmouseup, onclick, onMouseOver e onMouseOut

Com eles, vamos aprender a detectar quando o usuário apertou o botão, soltou, clicou, passou por cima e saiu de cima de uma área com o mouse.

• Apostila JavaScript Progressivo em PDF para download

Eventos onmousedown, onmouseup e onclick- Apertando, soltando e clicando

O evento onmousedown significa 'quando o mouse for pra baixo', ou seja, quando você é o evento que detecta a ação de apertar o botão do mouse.

Já o evento onmouseup, significa 'quando o soltar o mouse', ou seja, é um evento que detecta o ato de soltar o botão do mouse

O terceiro evento, nós já conhecemos, é o onclick, e significa 'ao clicar'. Clicar é o ato de apertar e soltar alguma botão do mouse. Quando você só aperta, ele não faz nada, nem se somente soltar. Este evento só ocorre quando você clica, ou seja, quando você aperta e solta, a ação completa é que dispara o evento onclick, ok?

No script abaixo, criamos um botão em HTML e duas divs, que vão exibir a ação que você tomou.
Quando você clica no mouse, o evento onmousedown dispara a função "aperta()".
Quando você solta o botão do mouse, o evento onmouseup dispara a função "solta()".
E, por fim, quando você clica, o evento onclick dispara a ação "clica()".

Código HTML:

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
 <head>
    <title>Apostila JavaScript Progressivo</title>
    <script type="text/javascript" src="script.js"></script>
 </head>
 <body>
  <button onmousedown="aperta()" onmouseup="solta()" onclick="clica()">Clique neu!</button>
  <div id="status"></div>
  <div id="status2"></div>
 </body>
</html>

script.js:

function aperta()
{
 var status=document.getElementById("status");
 status.innerHTML="Você apertou o botão do mouse";
}

function solta()
{
 var status=document.getElementById("status");
 status.innerHTML="Você soltou o botão do mouse";
}

function clica()
{
 var status2=document.getElementById("status2");
 status2.innerHTML="Você clicou com o botão do mouse";
}

Resultado:

---

---

Eventos onMouseOver e onMouseOut - Passando e Tirando o mouse de um elemento

Ainda no mundo dos eventos com o mouse, existem dois bem interessantes.

Um é o onMouseOver, que em inglês quer dizer 'quando o mouse tiver por cima', que detecta a ação do mouse estar sobre um determinado elemento da página.

Já o onMouseOut detecta o contrário: o evento de sair com o mouse de uma região.

No código abaixo, definimos um quadrado via div.
Ele originalmente tem fundo vermelho.

Quando passamos o mouse por cima, o evento onMouseOver é acionado, que chama a função "porCima()" e passa o atual objeto (this), que é a div, para a função. Lá, o fundo é alterado para verde.

Quando você tira o mouse de cima dessa região, o evento onMouseOut é acionado, que chama a função "porFora()", onde o parâmetro é o objeto atual. Dentro da função, alteramos o fundo do objeto (div) para azul.

Código HTML:

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
 <head>
    <title>Apostila JavaScript Progressivo</title>
    <script type="text/javascript" src="script.js"></script>
 </head>
 <body>
  <div onmouseover="porCima(this)" onmouseout="porFora(this)"
   style="background-color:#FF0000; width:100px; height:100px;">Coloque o mouse aqui</div>
 </body>
</html>

script.js:

function porCima(obj)
{
 obj.style.backgroundColor = "#00FF00";
    obj.innerHTML = "Mouse dentro!";
}
 
function porFora(obj)
{
 obj.style.backgroundColor = "#0000FF";
    obj.innerHTML = "Mouse fora!";
}

Resultado:

---

Coloque o mouse aqui

---

Evento onchange - Evento de mudança de um elemento

Neste tutorial de nossa apostila de JavaScript, vamos aprender a usar evento onchange.

• Estudar eventos pela Apostila JavaScript Progressivo em PDF

O Evento onchange

O evento onchange é utilizado nos chamados elementos de opção.
Ou seja, o evento dispara uma ação quando uma mudança ocorre em algum elemento.

As sintaxes de uso, são:
Inline:

<elemento onchange="minhaFunaco()">

No código JavaScript

meuObjeto.onchange = function(){
 //codigo da
 //funcao
};

Através do método addEventListener:

meuObjeto.addEventListener("change", minhaFuncao);

Exemplo de uso do evento onchange

Vamos usar uma input para exemplificar o evento onchange.
Iremos digitar algo na caixa de input e depois clicamos fora dela. Quando fizermos isso, tudo o que digitamos vai virar maiúsculo!


Código HTML:

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
 <head>
    <title>Apostila JavaScript Progressivo</title>
    <script type="text/javascript" src="script.js"></script>
 </head>
 <body>
  Digite algo: <input type="text" id="meuInput" onchange="minhaFuncao()">
 </body>
</html>

script.js

function minhaFuncao()
{
   var minhaInput=document.getElementById("meuInput");
   minhaInput.value=(minhaInput.value).toUpperCase();
}

O que ocorre é que quando digitamos algo, estamos fazendo uma alteração, uma mudança (change, em inglês).

Quando clicamos fora da input, ela detecta que algo mudou nela e o evento onchange dispara, fazendo o que? Invocando a função minhaFuncao().

Essa função, do JS, vai pegar a input e ligar ela a variável minhaInput.
Agora pegamos o que tem escrito no input: minhainput.value
E fazemos receber essa mesma string, porém transformada em caracteres maiúsculos, através do método toUpperCase(), do objeto String, que já estudamos.


Teste o resultado, digite algo e depois clique fora:

---

Digite algo:

---

Ou seja, você deve usar o evento onchange quando desejar detectar alguma mudança, em seus elementos de opção.

Esses elementos, são:

1. <input> - com type="checkbox", "color", "date", "datetime", "email", "file", "checkbox", "color", "password", "radio", "range", "search", "tel", "text", "time", "url", ou "week"
2. <select>
3. <textarea>

Exercício de JavaScript

No script anterior, ao invés de colocar todas as letras para maiúscula, faça com que apareça uma janela de alert, com a string digitada pelo usuário no formulário de input.

O Evento onload do JavaScript

Neste tutorial, vamos te ensinar a usar o evento mais simples e fácil de todos, o onload.

• Fazer download da apostila e estudar offline

Atributo do evento onload

O onload é um atributo que usamos quando queremos disparar um evento quando qualquer elemento tenha sido carregado.

Ele tem a seguinte sintaxe:

<elemento onload="ação">

E já usamos ele aqui algumas vezes, então quem está seguindo e fazendo o curso completinho, já está bem familiarizado com ele.

Ele tem um funcionamento bem simples: quando tudo do elemento <elemento> tiver sido carregado, ele vai disparar a ação, que geralmente é uma função do JavaScript. Sem mistério.

Usamos muito da seguinte maneira:

<body onload="main">
corpo do site...
</body>

Assim, quando o corpo do site estava totalmente carregado (incluindo imagens, scripts, arquivos de estilo CSS etc).

Você pode usar o atributo onload em outros elementos, como uma div ou parágrafo.

Lembre-se que ele vai disparar o evento somente quando terminar de carregar tudo...assim, se seu elemento faz chamadas de um script ou uma imagem e esse carregamento demore, vai demorar também a disparar o evento onload, ok?

Checando se os Cookies estão ativos

onload inline

Vamos te mostrar um script bem simples, que exibe se os cookies de um navegador estão ativos ou não.

Se estiverem, a propriedade cookieEnabled do objeto navigator (navegador) tem o valor booleano de true, e caso os cookies estejam desativados, é false.


Código HTML:

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
 <head>
    <title>Apostila JavaScript Progressivo</title>
    <script type="text/javascript" src="script.js"></script>
 </head>
 <body onload="checaCookie()">
  Checando permissão de cookies...
 </body>
</html>

script.js:

function checaCookie()
{
   if (navigator.cookieEnabled == true)
      alert("Cookies permitidos")
   else
      alert("Cookies bloqueados")
}

onload externo

Muitos programadores preferem não misturar código JavaScript com HTML.
No caso anterior, é inline porque passamos a função checaCookie dentro do código HTML, pro atributo onload da tag <body>.

Podemos separar totalmente o código JavaScript do HTML adicionando uma única linha ao nosso arquivo scripg.js:
document.onload = checaCookie();

Ou seja, usando o objeto document, o evento é disparado quando a árvore DOM é totalmente carregada. Veja como fica nosso código agora:


HTML:

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
 <head>
    <title>Apostila JavaScript Progressivo</title>
    <script type="text/javascript" src="script.js"></script>
 </head>
 <body>
  Checando permissão de cookies...
 </body>
</html>

script.js:

function checaCookie()
{
   if (navigator.cookieEnabled == true)
      alert("Cookies permitidos")
   else
      alert("Cookies bloqueados")
}

document.onload = checaCookie();

Mais organizado, não?


Vale lembrar que isso vale para qualquer elemento que você desejar, ok?
Por exemplo, um script que é ativado quando a imagem imagem.jpg terminar de carregar, seria:

<img src="foto.jpg" onload="imagemCarregada()" width="200" height="264">

<script>
function imagemCarregada() {
  alert("Imagem completamente carregada!");
}
</script>

Leia mais sobre isso em:
https://www.w3schools.com/jsref/event_onload.asp

Evento em JavaScript - O que é ? Para que serve?

Neste tutorial de nossa apostila de JavaScript, vamos dar uma introdução bem simples sobre o que são os events em JS, para que servem, onde são usados e, inclusive, onde já usamos em nossa apostila online.

• Estudar eventos pela Apostila JavaScript Progressivo

Eventos - O que são? Para que servem ?

Na sua vida, no seu dia-a-dia, o que é um evento?

É um acontecimento, uma ação, algo que ocorre.

Eventos, não só em JavaScript mas como em outras linguagens, são ações que um programa ou script toma em resposta a alguma coisa que o usuário fez.

Você já deve ter entrado em sites que não deixam você clicar com o botão direito em cima, pra copiar o conteúdo. Ou seja, acontece uma ação (uma mensagem de erro aparece), em resposta a sua ação (clicar com o mouse). Se não clicar, nada ocorre.

Outros sites não deixam você dar control + C pra copiar um conteúdo, bloqueiam, ou mandam uma mensagem junto com o texto copiado. Ou seja, dependendo da ação que você toma (dar ctrl+C), o JavaScript vai desencadear um evento (mensagem de erro, por exemplo).

O exemplo mais conhecido seria o ato de pressionar um botão. O carregamento de uma página também pode desencadear um evento, a introdução de alguma informação em algum campo de input, passar o mouse por uma determinada região da página etc.

Eventos - Como fazer ?

Existem basicamente duas maneiras de se trabalhar com eventos, a primeira delas é inline, direto no código HTML.

O protótipo de um evento 'na linha' é:

<elemento evento="ação">

Ou seja, a ação vai ocorrer no elemento quando o usuário desencadear um evento.

Vamos relembrar um evento inline que usamos bastante durante nossa apostila:

<button onclick="funcao()">Função</button><br />

Lembram? Usamos para criar botões.

Funciona assim: o evento é o onclick, ou seja 'no clique'.

Quer dizer que quando o usuário clicar no elemento (no caso, um botão <button>), ele vai chamar uma ação. No caso, que ação é essa? Invocar a funcao().

Testem o seguinte exemplo de código HTML:

<p onclick="this.innerHTML='Tcharam!!!'">Clique aqui</p>

O resultado é o seguinte:

Clique aqui

Veja...o elemento é apenas um parágrafo, um simplório <p> </p>
Quando clicamos, desencadeia um evento do tipo onclick, que através do atributo innerHTML do próprio documento (this), e a ação é simplesmente substituir o texto "Clique aqui" por "Tcharam!!!".

Bem simples, não?

Já a outra maneira de fazer eventos é a através de um evento externo, usando um manipulador de eventos (event handler), que vamos estudar em tutorial futuro.