Javascript: guia sobre eventos

Neste tutorial, você aprenderá como manipular eventos em JavaScript de maneira simples e eficaz, pensado no iniciante em programação.

Temos também um artigo sobre eventos em Node.js, fique a vontade para ler também.

Noções básicas sobre eventos e manipuladores de eventos

Eventos são coisas que acontecem quando um usuário interage com uma página da Web, como quando o usuário clica em um link ou botão, insere texto em uma caixa de entrada ou área de texto, faz uma seleção em uma caixa de seleção, pressiona uma tecla no teclado, move o ponteiro do mouse, envia o formulário, etc. Em alguns casos, eventos podem ser acionados pelo próprio navegador, como eventos de carregamento e descarregamento de página.

Quando ocorre um evento, você pode usar um manipulador de eventos JavaScript (ou ouvinte de eventos) para capturá-lo e executar uma tarefa específica ou um conjunto de tarefas. Por convenção, os nomes dos manipuladores de eventos sempre começam com a palavra “on”, então o manipulador de eventos para o evento click é chamado de onclick, da mesma forma, o manipulador de eventos para o evento load é chamado de onload e o manipulador de eventos para o evento blur é chamado onblure Então, sobre.

Saiba mais: aprenda HTML, CSS e Javascript neste treinamento GRATUITO!

Existem várias maneiras de atribuir manipuladores de eventos. A maneira mais fácil é adicioná-los diretamente à tag de abertura do elemento HTML usando o atributo especial do manipulador de eventos. Por exemplo, para atribuir um manipulador de clique a um elemento de botão, podemos usar o atributo onclick da seguinte maneira:

<button type="button" onclick="alert('Olá mundo!')">Clique em Mim</button>

No entanto, para separar JavaScript de HTML, você pode configurar manipuladores de eventos em arquivos JavaScript externos ou dentro das tags <script> e </script> , assim:

<button type="button" id="myBtn">Clique em Mim</button>
<script>
    function digaOla() {
        alert('Olá mundo!');
    }
    document.getElementById("myBtn").onclick = digaOla;
</script>

Nota: Os atributos HTML não diferenciam maiúsculas de minúsculas, portanto, os eventos podem ser escritos como onClick, OnClick ou ONCLICK. No entanto, o valor desses atributos diferencia maiúsculas de minúsculas.

Eventos podem ser agrupados em quatro grupos principais: eventos de mouse, eventos de teclado, eventos de formulário e eventos de documento/janela. Mais tarde neste curso, você aprenderá mais sobre outros eventos. Esta seção fornece uma visão geral breve dos eventos mais úteis, juntamente com exemplos práticos de aplicação.

Eventos do mouse

Os eventos de mouse são disparados quando o usuário clica em um elemento, move o ponteiro do mouse sobre um elemento, etc. Abaixo estão alguns dos eventos de mouse mais importantes e seus manipuladores de eventos.

• onclick: ocorre quando o botão esquerdo do mouse é clicado. Por exemplo:

<button onclick="alert('Você clicou no botão!')">Clique em mim</button>

• ondblclick: ocorre quando o botão esquerdo do mouse é clicado duas vezes rapidamente. Por exemplo:

<p ondblclick="alert('Você deu um duplo clique!')">Clique duas vezes rapidamente aqui</p>

• onmousedown: ocorre quando o botão do mouse é pressionado (mas ainda não solto). Por exemplo:

<div onmousedown="alert('Você pressionou o botão do mouse!')">Pressione o botão do mouse aqui</div>

• onmouseup: ocorre quando o botão do mouse é solto após ter sido pressionado. Por exemplo:

<div onmouseup="alert('Você soltou o botão do mouse!')">Pressione e solte o botão do mouse aqui</div>

• onmouseover: ocorre quando o ponteiro do mouse é movido sobre um elemento. Por exemplo:

<div onmouseover="alert('Você posicionou o ponteiro do mouse sobre o elemento!')">Posicione o ponteiro do mouse aqui</div>

• onmouseout: ocorre quando o ponteiro do mouse é movido para fora de um elemento. Por exemplo:

<div onmouseout="alert('Você moveu o ponteiro do mouse para fora do elemento!')">Posicione o ponteiro do mouse aqui e depois mova-o para fora</div>

• onmousemove: ocorre quando o ponteiro do mouse é movido sobre um elemento. Este evento é disparado repetidamente enquanto o ponteiro do mouse estiver se movendo. Por exemplo:

<div onmousemove="alert('Você está movendo o ponteiro do mouse!')">Mova o ponteiro do mouse aqui</div>

Além disso, é possível usar o evento oncontextmenu para detectar quando o botão direito do mouse é clicado e exibir um menu de contexto personalizado. Por exemplo:

<div oncontextmenu="alert('Você clicou com o botão direito do mouse!')">Clique com o botão direito do mouse aqui</div>

Eventos do teclado

Os eventos de teclado são acionados quando o usuário pressiona ou solta uma tecla no teclado. A seguir estão alguns dos eventos de teclado mais importantes e seus manipuladores de eventos.

1. keydown: é acionado quando uma tecla é pressionada.

document.addEventListener("keydown", function(event) {
  console.log("Uma tecla foi pressionada!");
});

2. keyup: é acionado quando uma tecla é solta.

document.addEventListener("keyup", function(event) {
  console.log("Uma tecla foi solta!");
});

3. keypress: é acionado quando uma tecla é pressionada e solta.

document.addEventListener("keypress", function(event) {
  console.log("Uma tecla foi pressionada e solta!");
});

Você também pode verificar qual tecla foi pressionada usando o objeto event e a propriedade key. Por exemplo:

document.addEventListener("keydown", function(event) {
  console.log("A tecla pressionada foi: " + event.key);
});

Eventos de formulários

Os eventos de formulário são acionados quando um controle de formulário ganha ou perde o foco ou quando o usuário modifica um valor de controle de formulário (como digitar texto em uma entrada de texto, selecionar qualquer opção em uma caixa de seleção etc.). A seguir estão alguns dos eventos de formulário mais importantes e seus manipuladores de eventos.

1. submit: é acionado quando o formulário é enviado. Você pode usar esse evento para validar os dados do formulário antes de enviá-los para o servidor.

document.querySelector("form").addEventListener("submit", function(event) {
  event.preventDefault(); // Previne o envio do formulário
  console.log("O formulário foi enviado!");
});

2. focus: é acionado quando um elemento do formulário recebe o foco (por exemplo, quando o usuário clica nele ou usa a tecla tab para navegar até ele).

document.querySelector("input").addEventListener("focus", function(event) {
  console.log("O elemento de input recebeu o foco!");
});

3. blur: é acionado quando um elemento do formulário perde o foco (por exemplo, quando o usuário clica em outro elemento ou pressiona a tecla tab).

document.querySelector("input").addEventListener("blur", function(event) {
  console.log("O elemento de input perdeu o foco!");
});

4. change: é acionado quando o valor de um elemento do formulário é alterado (por exemplo, quando o usuário seleciona uma opção em um elemento select ou digita algo em um elemento input).

document.querySelector("select").addEventListener("change", function(event) {
  console.log("O valor do elemento select foi alterado!");
});

Eventos de documento/janela (document/window)

Os eventos de documento/janela em JavaScript são acionados quando determinados eventos ocorrem no documento HTML ou na janela do navegador. Abaixo estão alguns dos eventos de documento/janela mais importantes e seus manipuladores de eventos.

1. load: é acionado quando o conteúdo do documento é completamente carregado (incluindo imagens, scripts, etc.). Você pode usar esse evento para executar uma determinada ação assim que o documento estiver pronto.

window.addEventListener("load", function(event) {
  console.log("O documento foi carregado!");
});

2. unload: é acionado quando o usuário deixa a página (por exemplo, quando clica em um link para ir para outra página ou fecha a janela do navegador).

window.addEventListener("unload", function(event) {
  console.log("O usuário deixou a página!");
});

3. resize: é acionado quando o tamanho da janela do navegador é alterado (por exemplo, quando o usuário redimensiona a janela ou gira o dispositivo em um tela sensível ao toque).

window.addEventListener("resize", function(event) {
  console.log("O tamanho da janela foi alterado!");
});

4. scroll: é acionado quando o usuário rola a página (por exemplo, quando usa a roda do mouse ou as setas de rolagem).

window.addEventListener("scroll", function(event) {
  console.log("A página foi rolada!");
});

Leia também: 6 cursos de desenvolvimento web para fazer em 2023