El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

La gestió d'esdeveniments és una part fonamental de la programació web interactiva. Els esdeveniments permeten que el teu codi JavaScript reaccioni a les accions dels usuaris, com ara clics de botons, moviments del ratolí, tecles pressionades, i molt més. En aquesta secció, aprendrem com gestionar esdeveniments en JavaScript utilitzant el Model d'Objectes del Document (DOM).

Conceptes Clau

Esdeveniments: Accions o successos que tenen lloc en el navegador, com ara clics, càrrega de pàgina, moviments del ratolí, etc.
Listeners d'Esdeveniments: Funcions que s'executen en resposta a un esdeveniment específic.
Propagació d'Esdeveniments: El procés pel qual un esdeveniment es mou a través del DOM. Inclou la fase de captura, la fase de destinació i la fase de bubbling.

Afegir Listeners d'Esdeveniments

`addEventListener`

La manera més comuna d'afegir un listener d'esdeveniments a un element del DOM és utilitzant el mètode addEventListener. Aquest mètode permet associar una funció a un esdeveniment específic.

// Seleccionem l'element del DOM
const button = document.querySelector('button');

// Afegim un listener d'esdeveniments per al clic
button.addEventListener('click', function() {
    alert('Botó clicat!');
});

Exemple Pràctic

Imagina que tenim un botó en el nostre HTML:

<button id="myButton">Clica'm!</button>

Podem afegir un listener d'esdeveniments per mostrar un missatge quan el botó és clicat:

// Seleccionem el botó pel seu ID
const myButton = document.getElementById('myButton');

// Afegim el listener d'esdeveniments
myButton.addEventListener('click', function() {
    console.log('El botó ha estat clicat!');
});

Tipus Comuns d'Esdeveniments

Esdeveniments de Ratolí

click: Quan l'usuari fa clic en un element.
dblclick: Quan l'usuari fa doble clic en un element.
mouseover: Quan el ratolí es mou sobre un element.
mouseout: Quan el ratolí es mou fora d'un element.

Esdeveniments de Teclat

keydown: Quan una tecla és pressionada.
keyup: Quan una tecla és alliberada.
keypress: Quan una tecla és pressionada i alliberada.

Exemple d'Esdeveniments de Teclat

document.addEventListener('keydown', function(event) {
    console.log(`Tecla pressionada: ${event.key}`);
});

Propagació d'Esdeveniments

Bubbling i Captura

Els esdeveniments en el DOM poden propagar-se de dues maneres:

Bubbling: L'esdeveniment es propaga des de l'element més profund fins a l'element més extern.
Captura: L'esdeveniment es propaga des de l'element més extern fins a l'element més profund.

Per defecte, els esdeveniments utilitzen el bubbling. Pots especificar la fase de captura passant un tercer paràmetre true a addEventListener.

// Bubbling (per defecte)
element.addEventListener('click', function() {
    console.log('Bubbling');
});

// Captura
element.addEventListener('click', function() {
    console.log('Captura');
}, true);

Exercicis Pràctics

Exercici 1: Canviar el Color de Fons

Crea un botó que canviï el color de fons de la pàgina quan és clicat.

<button id="colorButton">Canvia el Color de Fons</button>

const colorButton = document.getElementById('colorButton');

colorButton.addEventListener('click', function() {
    document.body.style.backgroundColor = 'lightblue';
});

Exercici 2: Comptador de Clics

Crea un botó que mostri el nombre de vegades que ha estat clicat.

<button id="countButton">Clica'm!</button>
<p id="clickCount">Clics: 0</p>

const countButton = document.getElementById('countButton');
const clickCount = document.getElementById('clickCount');
let count = 0;

countButton.addEventListener('click', function() {
    count++;
    clickCount.textContent = `Clics: ${count}`;
});

Errors Comuns i Consells

No Seleccionar Correctament l'Element: Assegura't que l'element existeix en el DOM abans d'afegir un listener d'esdeveniments.
Oblidar-se de Treure Listeners: Si afegeixes listeners d'esdeveniments en elements que es creen i s'eliminen dinàmicament, assegura't de treure'ls per evitar fuites de memòria.

// Treure un listener d'esdeveniments
element.removeEventListener('click', handlerFunction);

Resum

En aquesta secció, hem après com gestionar esdeveniments en JavaScript utilitzant addEventListener. Hem vist exemples pràctics d'esdeveniments de ratolí i teclat, i hem explorat la propagació d'esdeveniments. També hem practicat amb exercicis per reforçar els conceptes apresos. Ara estàs preparat per crear aplicacions web més interactives i dinàmiques!

Gestió d'Esdeveniments

Conceptes Clau

Afegir Listeners d'Esdeveniments

`addEventListener`

Exemple Pràctic

Tipus Comuns d'Esdeveniments

Esdeveniments de Ratolí

Esdeveniments de Teclat

Exemple d'Esdeveniments de Teclat

Propagació d'Esdeveniments

Bubbling i Captura

Exercicis Pràctics

Exercici 1: Canviar el Color de Fons

Exercici 2: Comptador de Clics

Errors Comuns i Consells

Resum

JavaScript: De Principiant a Avançat

Mòdul 1: Introducció a JavaScript

Mòdul 2: Estructures de Control

Mòdul 3: Funcions

Mòdul 4: Objectes i Arrays

Mòdul 5: Objectes i Funcions Avançades

Mòdul 6: El Model d'Objectes del Document (DOM)

Mòdul 7: APIs del Navegador i Temes Avançats

Mòdul 8: Proves i Depuració

Mòdul 9: Rendiment i Optimització

Mòdul 10: Frameworks i Llibreries de JavaScript

Mòdul 11: Projecte Final