Eventos y formularios

Eventos

Una página es interactiva porque reacciona a acciones: clics, teclas, envíos de formularios... A cada acción se la llama evento. Para responder a un evento se registra un escuchador con addEventListener:

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

El primer argumento es el nombre del evento ("click", "keydown", "submit", "input"...). El segundo es la función manejadora, que recibe un objeto event con información de lo ocurrido.

Crear y eliminar elementos

const li = document.createElement("li"); // crear
li.textContent = "Nueva tarea";
lista.appendChild(li);                    // insertar
li.remove();                              // eliminar

Formularios

Al enviar un formulario, el navegador recarga la página por defecto. Para evitarlo y manejarlo con JavaScript se usa event.preventDefault():

formulario.addEventListener("submit", function (event) {
  event.preventDefault();          // no recargues la página
  const valor = entrada.value;     // leer lo escrito
  console.log("Enviado:", valor);
});

En los ejercicios de este módulo usarás el document de práctica del editor: crearás elementos, los insertarás en document.body, los seleccionarás y reaccionarás a eventos como click — igual que en un navegador real.

Ejemplos

Generar una lista <li> a partir de un array (lógica pura)

function listaHTML(items) {
  return items.map((t) => `<li>${t}</li>`).join("");
}
console.log(listaHTML(["uno", "dos", "tres"]));