Trabalhando com Eventos em JavaScript

Descubra como trabalhar com eventos em JavaScript para tornar suas páginas web interativas. Aprenda a adicionar manipuladores de eventos como onclick, onchange, e addEventListener, com exemplos práticos.

Trabalhando com Eventos em JavaScript

Eventos são ações ou ocorrências que acontecem na página web e que podem ser capturadas e manipuladas usando JavaScript. Eles são fundamentais para criar páginas interativas, respondendo a ações do usuário como cliques, movimentos do mouse, entradas de teclado e muito mais. Neste post, vamos explorar o conceito de eventos e como adicionar manipuladores de eventos com onclick, onchange e addEventListener.

Dicas de JavaScript básico para iniciantes - Manipulação de DOM — Tutorial de JavaScript básico para iniciantes

O Que São Eventos?

Eventos são mecanismos que permitem a execução de funções JavaScript em resposta a ações do usuário ou mudanças no estado da página. Eles podem ser acionados por diversas interações, como clicar em um botão, mover o mouse sobre um elemento, pressionar uma tecla, carregar a página, entre outros.

Adicionando Manipuladores de Eventos

Para responder a eventos, usamos manipuladores de eventos, que são funções executadas quando o evento ocorre. Existem várias formas de adicionar manipuladores de eventos em JavaScript.

`onclick`

O manipulador de evento onclick é usado para executar uma função quando um elemento é clicado. Veja um exemplo simples:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Eventos em JavaScript</title>
</head>
<body>
    <button onclick="mostrarAlerta()">Clique aqui</button>
    <script>
        function mostrarAlerta() {
            alert("Botão clicado!");
        }
    </script>
</body>
</html>

`onchange`

O manipulador de evento onchange é utilizado em elementos de formulário para detectar quando o valor de um campo muda. Vamos ver um exemplo com um campo de texto:

<input type="text" id="meuInput" onchange="mostrarValor()">
<script>
    function mostrarValor() {
        const valor = document.getElementById("meuInput").value;
        alert("Valor alterado para: " + valor);
    }
</script>

`addEventListener`

O método addEventListener é a forma mais flexível e recomendada para adicionar manipuladores de eventos. Ele permite adicionar múltiplos manipuladores para o mesmo evento sem sobrescrever os existentes. Aqui está um exemplo:

<button id="meuBotao">Clique aqui</button>
<script>
    const botao = document.getElementById("meuBotao");
    botao.addEventListener("click", () => {
        alert("Botão clicado com addEventListener!");
    });
</script>

Exemplos de Eventos Comuns

Vamos explorar alguns eventos comuns e como usá-los para criar interatividade na sua página web.

Evento de Clique

O evento de clique (click) é um dos mais usados. Ele é acionado quando o usuário clica em um elemento. Aqui está um exemplo de como alterar o texto de um parágrafo quando um botão é clicado:

<p id="meuParagrafo">Texto original</p>
<button id="meuBotao">Clique para mudar o texto</button>
<script>
    const paragrafo = document.getElementById("meuParagrafo");
    const botao = document.getElementById("meuBotao");

    botao.addEventListener("click", () => {
        paragrafo.textContent = "Texto alterado!";
    });
</script>

Evento de Mudança

O evento de mudança (change) é útil para formularários, como vimos anteriormente. Vamos ver um exemplo com um seletor de opções (select):

<select id="meuSelect" onchange="mostrarOpcao()">
    <option value="opcao1">Opção 1</option>
    <option value="opcao2">Opção 2</option>
    <option value="opcao3">Opção 3</option>
</select>
<script>
    function mostrarOpcao() {
        const select = document.getElementById("meuSelect");
        const opcaoSelecionada = select.value;
        alert("Você selecionou: " + opcaoSelecionada);
    }
</script>

Evento de Movimento do Mouse

O evento de movimento do mouse (mousemove) pode ser usado para criar efeitos interativos, como alterar a posição de um elemento com base na posição do mouse:

<div id="caixa" style="width: 100px; height: 100px; background-color: blue;"></div>
<script>
    const caixa = document.getElementById("caixa");

    document.addEventListener("mousemove", (event) => {
        caixa.style.left = event.pageX + "px";
        caixa.style.top = event.pageY + "px";
    });
</script>

Conclusão

Entender e trabalhar com eventos em JavaScript é essencial para criar páginas web interativas e responsivas. Ao aprender como adicionar manipuladores de eventos com onclick, onchange e addEventListener, você pode responder a ações do usuário e melhorar a experiência do usuário. Pratique esses conceitos e incorpore-os em seus projetos para criar interfaces dinâmicas e envolventes.