Ves al contingut principal

DOM event

La taula d'esdeveniments DOM (Document Object Model) mostra els mecanismes crucials que té JavaScript per interactuar amb l'usuari i l'estat del navegador. En lloc de limitar-nos a la taula, ens centrarem en les categories principals d'esdeveniments i destacarem els més importants i d'ús freqüent, amb exemples clars d'ús amb addEventListener().

Esdeveniments de ratolí (Mouse Events)

Aquests són els esdeveniments més comuns per a la interactivitat bàsica.

Event Descripció Millorada Cas d'Ús Destacat
click Es dispara quan es pressiona i es deixa anar ràpidament el botó principal del ratolí sobre un element. És l'esdeveniment fonamental per a la interacció amb botons, enllaços i elements interactius.
dblclick Es dispara quan l'usuari fa doble clic ràpidament sobre un element. S'utilitza per activar edicions o obertures ràpides (p. ex., obrir una carpeta).
mouseover El punter del ratolí es mou sobre l'element o sobre qualsevol dels seus fills. Sovint substituït per mouseenter per millorar el rendiment.
mouseenter El punter del ratolí entra a l'element. No es dispara quan entra als fills. Ideal per mostrar tooltips o canviar estils quan el ratolí entra a la zona.
mouseleave El punter del ratolí surt de l'element. Desfer els canvis fets amb mouseenter.
mousedown / mouseup Es disparen quan es pressiona / s'allibera el botó del ratolí. Útils per implementar funcionalitats de "drag and drop" o per mesurar el temps de retenció del clic.

Exemple de ratolí (click i mouseenter)

JavaScript 

const boto = document.getElementById('meuBoto');
const missatge = document.getElementById('missatge');

// 1. Esdeveniment click
boto.addEventListener('click', () => {
    alert('Has clicat el botó!');
});

// 2. Esdeveniment mouseenter
boto.addEventListener('mouseenter', () => {
    missatge.textContent = 'Passant el ratolí per sobre...';
});

Esdeveniments de teclat (Keyboard Events)

Essencials per a formularis, dreceres de teclat i jocs.

Event Descripció Millorada Cas d'Ús Destacat
keydown Es dispara quan es pressiona una tecla. Es dispara repetidament si la tecla es manté premuda. Detecció de dreceres (Ctrl + S), o detecció de tecles no-caràcter (F1, F5).
keyup Es dispara quan s'allibera una tecla. Finalitzar la detecció d'una drecera o d'una pulsació.
keypress Obsolet/Desaconsellat. Només es disparava quan es premia una tecla que produïa un caràcter (p. ex., 'A', '1', però no 'Majúscules' o 'Alt'). Usar keydown o input en el seu lloc.

Exemple de teclat (keydown)

JavaScript 

document.addEventListener('keydown', (event) => {
    // La propietat 'key' retorna la tecla premuda
    if (event.key === 'Enter') {
        console.log("Usuari ha pressionat Enter. Enviant formulari...");
        // event.preventDefault(); // Evita l'acció per defecte
    }
    // Per a dreceres:
    if (event.ctrlKey && event.key === 'd') {
        event.preventDefault(); // Bloqueja el comportament per defecte del navegador
        alert("Drecera Ctrl+D activada!");
    }
});

Esdeveniments de formulari i entrada (Form & Input Events)

Controlen la interacció amb camps de text, seleccions i l'enviament de dades.

Event Descripció Millorada Cas d'Ús Destacat
change Es dispara quan un element de formulari perd el focus (amb blur) i el seu valor ha estat modificat des de l'últim focus. Validació final de camp, o canvi en <select>.
input Es dispara immediatament cada vegada que el valor d'un camp canvia (es prem una tecla, es fa una retallada, etc.). Validació instantània en temps real, comptadors de caràcters.
focus / blur Es dispara quan un element rep / perd el focus (es fa clic a dins / es fa clic a fora). Canviar l'estil visual del camp actiu.
submit Es dispara quan s'intenta enviar un <form>. Interceptar l'enviament per fer una validació de dades final abans d'enviar-les al servidor.

Exemple de formulari (input i submit)

JavaScript 

const campNom = document.getElementById('nom');
const formulari = document.getElementById('meuForm');

// 1. Esdeveniment input (Validació en temps real)
campNom.addEventListener('input', () => {
    if (campNom.value.length < 3) {
        console.log("El nom ha de tenir almenys 3 caràcters.");
    }
});

// 2. Esdeveniment submit (Validació final)
formulari.addEventListener('submit', (event) => {
    if (campNom.value.length === 0) {
        event.preventDefault(); // Evita que el formulari s'enviï
        alert('El camp Nom és obligatori!');
    }
    // Si la validació és OK, el formulari s'envia
});

Esdeveniments de finestra i document (Window & Document Events)

Aquests esdeveniments estan relacionats amb l'estat del navegador, l'URL i el procés de càrrega.

Event Descripció Millorada Cas d'Ús Destacat
load Es dispara quan la pàgina sencera (incloent-hi tots els recursos: imatges, scripts, CSS) ha acabat de carregar-se. Iniciar el codi principal de l'aplicació o inicialitzar scripts de tercers.
DOMContentLoaded Es dispara quan el document HTML ha estat completament carregat i parsejat, sense esperar els estils ni les imatges. Recomanat per iniciar la lògica JavaScript, ja que és més ràpid que load.
resize Es dispara quan la finestra del navegador canvia de mida. Adaptar la interfície a resolucions canviants o al gir de la pantalla en mòbils.
scroll Es dispara quan l'usuari fa scroll a l'element o a la finestra. Implementar càrrega infinita (infinite scroll) o fixar elements (com una capçalera) en una posició.
popstate Es dispara quan l'usuari navega a una entrada de l'historial (clicant Enrere/Endavant) després d'haver utilitzat history.pushState(). Essencial per a la gestió de rutes en SPAs (Single Page Applications).

Exemple de finestra (DOMContentLoaded i resize)

JavaScript 

// Millor que 'load' per iniciar el JS
document.addEventListener('DOMContentLoaded', () => {
    console.log("L'estructura DOM està llesta.");
    // Aquí inicialitzem listeners d'elements que ja existeixen
});

// Adaptació a la pantalla
window.addEventListener('resize', () => {
    console.log(`Nova amplada de la finestra: ${window.innerWidth}px`);
    // Codi per recalcular la posició d'un mapa o d'un gràfic
});

Amunt