Eventos e formulários

Eventos

Uma página é interativa porque reage a ações: cliques, teclas, envios de formulários... Cada ação é chamada de evento. Para responder a um evento você registra um ouvinte com addEventListener:

const botao = document.querySelector("#enviar");
botao.addEventListener("click", function (event) {
  console.log("Clique!");
});

O primeiro argumento é o nome do evento ("click", "keydown", "submit", "input"...). O segundo é a função manipuladora, que recebe um objeto event com informação sobre o que aconteceu.

Criar e remover elementos

const li = document.createElement("li"); // criar
li.textContent = "Nova tarefa";
lista.appendChild(li);                    // inserir
li.remove();                              // remover

Formulários

Ao enviar um formulário, o navegador recarrega a página por padrão. Para evitar isso e tratá-lo com JavaScript usa-se event.preventDefault():

formulario.addEventListener("submit", function (event) {
  event.preventDefault();          // não recarregue a página
  const valor = entrada.value;     // ler o que foi digitado
  console.log("Enviado:", valor);
});

Nos exercícios deste módulo você usará o document de prática do editor: criará elementos, os inserirá em document.body, os selecionará e reagirá a eventos como click — igual a um navegador real.

Exemplos

Gerar uma lista <li> a partir de um array (lógica pura)

function listaHTML(items) {
  return items.map((t) => `<li>${t}</li>`).join("");
}
console.log(listaHTML(["um", "dois", "três"]));