Esdeveniments del DOM: Ratolí, Teclat i Formularis

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.