Eventos com JavaScript

Nesse post vamos entender melhor o que são os eventos em JavaScript e logo de cara já vamos começar com uma definição: Um evento nada mais é do que qualquer ação que o usuário pode fazer na tela do navegador, como clicar em algum lugar com o mouse, apertar algum botão do teclado, passar o mouse sobre algum item, fechar a aba de navegação, enviar algum formulário etc.

Tá gostando desse post? Ele faz parte de uma série de conteúdos gratuitos do nosso site. Dá uma olhada aqui!

Existem diversos eventos que são bastante utilizados, vem ver:

• onChange: muda o valor do elemento;
• onClick: o elemento é clicado pelo usuário;
• onFocus: o elemento é focado;
• onKeyPress: o usuário pressiona alguma tecla sobre o elemento;
• onLoad: carrega o elemento por completo;
• onMouseOver: define ação quando o usuário passa o mouse sobre o elemento;
• onMouseOut: define ação quando o usuário retira o mouse sobre o elemento;
• onSubmit: define ação ao enviar um formulário;
• onBlur: remove o foco do elemento.

Veja aqui uma lista completa de possíveis eventos.

Cada evento possui um event handler (manipulador de eventos), que é um bloco de códigos (geralmente um função definida pelo usuário) que será executado quando o evento for disparado. Esses manipuladores de eventos são, em alguns casos, chamados de event listeners (ouvinte de eventos) que escutam o evento acontecendo, e o manipulador, é o código que roda em resposta a este acontecimento.

Criando uma lista ordenada usando o evento clique

Cientes disso, podemos fazer ações com o JS sobre esses comportamentos do usuário. Supondo que eu gostaria de criar uma lista ordenada de nomes de acordo com os inputs do usuário ao clicar no botão adicionar. Então no HTML precisamos ter o seguinte:

<input type="text" placeholder= "Digite um nome" class="inputTexto">

<button class="btnAdd">Adicionar na lista</button>
    
<ol></ol>

Agora no JS, a primeira coisa a fazermos é selecionar o input e pegar o valor digitado nesse campo:

// aqui pegamos o conteúdo do input
const inputTexto = document.querySelector(".inputTexto")

// aqui pegamos apenas o valor que foi digitado
const valorInput  = inputTexto.value 

Em seguida, precisamos selecionar o botão e a lista no HTML e depois adicionar um evento ao botão. Nesse caso adicionamos um “escutador” do que o usuário está fazendo e pedimos para ele ouvir os cliques e associá-los à função “pegarValores” (a nossa callback)

//selecionando o button
const btnAdd = document.querySelector(".btnAdd")

//selecionando a lista
const ol = document.querySelector("ol")

//adicionando o evento ao botão
btnAdd.addEventListener("click", adicionar)

De forma geral, a addEventListener, serve para adicionar um evento a uma lista de eventos dentro de um elemento. Sua estrutura tem como rotina chamar uma callback (uma função) ao elemento associado, que será ativada após um evento (event) ocorrer. Dentro da função addEventListener( ), especificamos 2 parâmetros: o nome do evento para o qual queremos registrar esse manipulador (no nosso caso, o clique), e o código que compreende a função do manipulador que queremos executar em resposta a ele (a função pegarValores).

Agora criamos essa função pegarValores e colocamos dentro dela os comandos de “seleção” e “guardar valores do input”. Em seguida já criamos os elementos da lista que serão adicionados, a alimentação desses valores pelo usuário e por fim, jogamos esses <li> para dentro da tag <ol>

function adicionar(event) {
    const inputTexto = document.querySelector(".inputTexto")
    const valorInput  = inputTexto.value 

    //Criando um Li para colocar na lista
    const li = document.createElement("li")
    li.innerText = valorInput

    //Adicionando os Lis na lista
    ol.appendChild(li)
}

Quer ver o código funcionando? Dá uma olhadinha por aqui:

See the Pen Creating_unordered_list_with_javascript by Computer Science Master (@ComputerScienceMaster) on CodePen.

Filtrando uma lista de nomes usando o evento onKeyPress

Agora que nós já criamos uma listinha baseada em nomes digitados pelo usuário podemos explorar outros exemplos legais e úteis para nosso cotidiano de programação. Por exemplo, imagine que eu tenho uma lista de nomes dentro do meu código:

let nomes = ["vânia", "jéssica", "janaina", "romulo", "arnaldo", "beatriz"];

Nesse exemplo, vamos tentar mostrar essa lista logo de cara, quando nosso programa é carregado. Para isso fazemos o seguinte script:

// Aqui você cria uma lista de nomes que será inserida na tela ao carregar o programa
  let nomes = ["vânia", "jéssica", "janaina", "romulo", "arnaldo", "beatriz"];

  //Selecionando os elementos da tela
  const ul = document.querySelector("ul");

  for (var i = 0; i < nomes.length; i++) {
    const li = document.createElement("li");
    li.innerText = nomes[i];
    ul.appendChild(li);
  }

Agora nós conseguimos ver os elementos da lista na tela, porém ainda não é possível filtrar esses elementos. Para isso, vamos usar um evento chamado OnKeyUp, que significa que um evento será disparado todas as vezes que uma tecla deixa de ser pressionada.

Assim, podemos compreender que quando digitamos a letra “a” no teclado, a tecla passa por vários eventos, alguns antes, outros depois dela ser apertada. No nosso caso queremos capturar o valor que foi digitado, então precisamos dizer que o evento é “keyup” visto que só depois da tecla finalizar sua inserção de dados que podemos pegar o valor do input.

Então vamos definir a seguinte função:

function filtrarValores(event) {
    // aqui você pega o valor do input de texto
    console.log(inputTexto.value);

    let nomesFiltrado = [];
    if (inputTexto.value != "") {
      // aqui você limpa o que está na tela
      ul.innerText = "";
      // aqui você filtra os nomes com a letra digitada
      for (var i = 0; i < nomes.length; i++) {
        if (nomes[i].includes(inputTexto.value)) {
          nomesFiltrado.push(nomes[i]);
        }
      }
      for (var i = 0; i < nomesFiltrado.length; i++) {
        const li = document.createElement("li");
        li.innerText = nomesFiltrado[i];
        ul.appendChild(li);
      }
    } else {
      // aqui você limpa o que está na tela
      ul.innerText = "";
      // aqui você mostra todos os nomes
      for (var i = 0; i < nomes.length; i++) {
        const li = document.createElement("li");
        li.innerText = nomes[i];
        ul.appendChild(li);
      }
    }
  }

Essa função basicamente verifica se o que o usuário digitou está contido dentro do nome na lista. Caso seja verdadeiro, o código salva esse nome em uma nova lista filtrada e depois exibe na tela. Por fim, se o usuário não digitou nada na tela, a lista completa aparece na interface.

See the Pen [Eventos em Javascript] – filtrando uma lista de nomes usando o evento onkeypress by Computer Science Master (@ComputerScienceMaster) on CodePen.