Sanfeliu
  1. Apunts
  2. JavaScript
  3. Lliçó 11 de 14

Esdeveniments del DOM: ratolí, teclat i formularis

Esdeveniments del DOM amb addEventListener: clics i ratolí, teclat amb event.key i formularis amb submit, input, focus i blur, amb activitats.

Els esdeveniments permeten que una pàgina web sigui interactiva i pugui respondre a accions de l'usuari com clics, tecles, moviments del ratolí o enviament de formularis.

Com escoltar esdeveniments

addEventListener()

element.addEventListener("click", function () {
  console.log("S'ha fet clic!");
});

Assignació directa

<button onclick="miFuncio()">Clicka'm</button>
function miFuncio() {
  console.log("Botó clicat");
}

🔎 Millor pràctica?

  • addEventListener() separa HTML i JS → millor mantenibilitat
  • Reutilitzable, permet afegir múltiples o eliminar escoltadors

Esdeveniments de Ratolí

Esdeveniment Descripció
click Clic amb botó esquerre
dblclick Doble clic
mousedown Quan es prem un botó
mouseup Quan es deixa de prémer
mousemove Quan es mou el ratolí
wheel Quan es fa scroll
drag/drop Per arrossegar i deixar anar

Exemple:

boton.addEventListener("click", function () {
  console.log("Click detectat!");
});

Activitat 1

Crea dos botons:

  • Un fa servir addEventListener()
  • L'altre fa servir onclick en HTML

Tots dos criden la mateixa funció que rep un missatge com a paràmetre i el mostra per consola.

Activitat 2

Quan es fa clic al botó:

  • Canvia background-color a blau
  • Canvia el color del text a blanc

Esdeveniments de Teclat

Esdeveniment Descripció
keydown Quan es prema una tecla
keyup Quan es solta una tecla

Exemple:

document.addEventListener("keydown", (event) => {
  if (event.key === "Enter") {
    alert("Premut Enter!");
  }
});

Activitat 3

Quan premem qualsevol tecla, hem de mostrar en temps real el nom de la tecla (event.key).

Activitat 4

Tenim diverses caixes i una està marcada amb la classe active.

  • Amb la tecla fletxa esquerra mourem la classe cap a l’esquerra
  • Amb la fletxa dreta, cap a la dreta
  • No podem sortir dels extrems

Activitat 5

Igual que l’anterior, però si arribem a l’última i premem → tornem al principi (i viceversa).

Esdeveniments de Formulari

Esdeveniment Descripció
submit Quan s’envia un formulari
change Quan un input canvia i es desenfoca
input Cada cop que l’usuari escriu o modifica
focus Quan un input rep el focus (selecció)
blur Quan un input perd el focus

Exemple amb submit

form.addEventListener("submit", function (event) {
  event.preventDefault();
  console.log("Formulari enviat");
});

Activitat 6

Crea un formulari amb 3 camps.

  • Mostra errors personalitzats si algun camp no és vàlid
  • Utilitza focus, blur, input per ajudar l’usuari
  • No deixis enviar si hi ha errors

Aquest capítol t’ajuda a crear interfícies interactives, capturant esdeveniments de l’usuari i responent de forma dinàmica.