Eventi Avanzati in JavaScript

Introduzione

Gli eventi sono meccanismi fondamentali in JavaScript che permettono di eseguire codice quando si verificano determinate azioni. Nel contesto del browser, gli eventi possono essere generati dall’utente (click, movimento del mouse, digitazione) o dal browser stesso (caricamento della pagina, scroll, resize).

Questo capitolo approfondisce:

• Metodi per registrare eventi: diversi approcci per aggiungere listener agli elementi
• Oggetto Event: proprietà e metodi disponibili per interagire con gli eventi
• Event propagation: come gli eventi si propagano attraverso il DOM (bubbling e capturing)
• Controllo del comportamento: preventDefault() e stopPropagation()
• Event delegation: pattern per gestire eventi su elementi dinamici
• Trigger programmatico: generare eventi tramite codice
• Drag and Drop: implementazione completa di operazioni di trascinamento

Cosa sono gli Eventi

Gli eventi rappresentano azioni o occorrenze che accadono nel browser o nell’applicazione. Quando un utente clicca un pulsante, muove il mouse o digita sulla tastiera, il browser genera un evento che può essere intercettato e gestito tramite JavaScript.

Il concetto di eventi non è esclusivo di JavaScript nel browser. La maggior parte dei linguaggi di programmazione implementa architetture basate su eventi perché permettono di eseguire codice in risposta a occorrenze specifiche, rendendo le applicazioni reattive e interattive.

Eventi nel Browser

Nel contesto del browser, gli eventi possono essere:

• Eventi dell’utente: click, movimento del mouse, digitazione sulla tastiera
• Eventi del browser: caricamento della pagina, scroll, resize della finestra
• Eventi di form: submit, change, focus, blur
• Eventi personalizzati: eventi creati programmaticamente dallo sviluppatore

Ogni evento trasporta dati che descrivono l’occorrenza. Questi dati sono contenuti in un oggetto Event che viene passato automaticamente alla funzione listener quando l’evento viene generato.

Tipi di Eventi

Il browser espone diversi tipi di eventi, organizzati in una gerarchia basata su prototipi:

• Event: oggetto base che contiene proprietà e metodi comuni a tutti gli eventi
• MouseEvent: eventi del mouse con coordinate e informazioni sul pulsante premuto
• KeyboardEvent: eventi della tastiera con informazioni sui tasti premuti
• DragEvent: eventi di drag and drop con dati trasferiti
• FocusEvent: eventi di focus e blur

Tutti gli eventi condividono proprietà comuni come target (l’elemento che ha generato l’evento), ma ogni tipo specializzato aggiunge proprietà specifiche. Ad esempio, MouseEvent include le coordinate del mouse, mentre DragEvent contiene i dati trasferiti durante l’operazione di trascinamento.

Metodi per Registrare Eventi

Esistono tre modi principali per registrare event listener sugli elementi DOM. Vediamo i pro e i contro di ciascun approccio.

Approccio HTML (Sconsigliato)

Il primo metodo consiste nell’aggiungere attributi HTML direttamente nel markup:

1
<button onclick="alert('Hello there')">Click me</button>

Ogni elemento HTML supporta attributi on* per diversi eventi: onclick, ondblclick, oncontextmenu, ondrag, e molti altri.

Problemi di questo approccio:

• Mescola HTML e JavaScript, rendendo il codice difficile da mantenere
• Non permette di aggiungere più listener per lo stesso evento
• Rende difficile il debugging e la manutenzione
• Non segue le best practice di separazione delle responsabilità

Questo approccio è fortemente sconsigliato e dovrebbe essere evitato in progetti moderni.

Proprietà on* (Limitato)

Un secondo metodo consiste nell’assegnare una funzione alla proprietà onclick dell’elemento:

1
const button = document.querySelector('button');
2

3
// Usando una funzione anonima
4
button.onclick = function() {
5
  alert('Button was clicked');
6
};
7

8
// Oppure usando una funzione nominata
9
const buttonClickHandler = () => {
10
  alert('Button was clicked');
11
};
12

13
button.onclick = buttonClickHandler;

Vantaggi:

• Mantiene il codice JavaScript separato dall’HTML
• Sintassi semplice e diretta

Svantaggi:

• Permette di aggiungere un solo listener per evento
• Se si assegna una nuova funzione, quella precedente viene sovrascritta
• Non permette rimozione granulare dei listener

1
// Questo sovrascrive il listener precedente
2
button.onclick = () => {
3
  console.log('This was clicked');
4
};
5
// Il primo alert non verrà mai eseguito

addEventListener (Consigliato)

Il metodo addEventListener() è l’approccio moderno e consigliato per registrare event listener:

1
const button = document.querySelector('button');
2

3
const buttonClickHandler = () => {
4
  alert('Button was clicked');
5
};
6

7
button.addEventListener('click', buttonClickHandler);

Vantaggi:

• Permette di aggiungere più listener allo stesso elemento per lo stesso evento
• Fornisce removeEventListener() per rimuovere listener specifici
• Maggiore controllo e flessibilità
• Supporta opzioni avanzate (capturing phase, once, passive)

Sintassi:

1
element.addEventListener(eventType, handlerFunction, options);

• eventType: stringa con il nome dell’evento (es. 'click', 'mouseenter', 'submit')
• handlerFunction: funzione da eseguire quando l’evento si verifica
• options: oggetto opzionale con configurazioni aggiuntive

Rimuovere Event Listener

Per rimuovere un listener registrato con addEventListener(), si usa removeEventListener():

1
button.addEventListener('click', buttonClickHandler);
2

3
// Rimuovere dopo 2 secondi
4
setTimeout(() => {
5
  button.removeEventListener('click', buttonClickHandler);
6
}, 2000);

Importante: removeEventListener() richiede la stessa funzione passata a addEventListener(). Non funziona con funzioni anonime perché ogni funzione anonima è un oggetto diverso:

1
// ❌ Non funziona - funzioni anonime diverse
2
button.addEventListener('click', () => console.log('clicked'));
3
button.removeEventListener('click', () => console.log('clicked')); // Non rimuove nulla
4

5
// ✅ Funziona - stessa funzione
6
const handler = () => console.log('clicked');
7
button.addEventListener('click', handler);
8
button.removeEventListener('click', handler); // Rimuove correttamente

Lo stesso principio si applica quando si usa .bind():

1
// ❌ Non funziona - bind crea nuove funzioni
2
button.addEventListener('click', handler.bind(this));
3
button.removeEventListener('click', handler.bind(this)); // Non rimuove nulla
4

5
// ✅ Funziona - salvare la funzione bound
6
const boundHandler = handler.bind(this);
7
button.addEventListener('click', boundHandler);
8
button.removeEventListener('click', boundHandler); // Rimuove correttamente

L’Oggetto Event

Quando un evento viene generato, il browser crea automaticamente un oggetto Event che contiene informazioni sull’evento stesso. Questo oggetto viene passato come primo argomento alla funzione listener.

Accedere all’Oggetto Event

La funzione listener riceve automaticamente l’oggetto event come primo parametro:

1
const button = document.querySelector('button');
2

3
button.addEventListener('click', function(event) {
4
  console.log(event);
5
  // Event object con tutte le proprietà e metodi
6
});

Il parametro può essere nominato in qualsiasi modo (event, ev, e), ma event è la convenzione più comune.

Proprietà Comuni dell’Event Object

Tutti gli eventi condividono alcune proprietà fondamentali:

target

La proprietà target rappresenta l’elemento DOM su cui è stato generato l’evento:

1
button.addEventListener('click', function(event) {
2
  console.log(event.target); // L'elemento button stesso
3
  console.log(event.target === button); // true
4
});

target è particolarmente utile quando si usa event delegation, perché permette di identificare quale elemento specifico ha generato l’evento anche se il listener è registrato su un elemento padre.

currentTarget

La proprietà currentTarget rappresenta l’elemento su cui è registrato il listener:

1
const div = document.querySelector('div');
2
const button = document.querySelector('button');
3

4
div.addEventListener('click', function(event) {
5
  console.log(event.target);      // button (elemento cliccato)
6
  console.log(event.currentTarget); // div (elemento con listener)
7
});

Mentre target è sempre l’elemento che ha generato l’evento, currentTarget è l’elemento su cui è registrato il listener corrente.

type

La proprietà type contiene il nome dell’evento come stringa:

1
button.addEventListener('click', function(event) {
2
  console.log(event.type); // "click"
3
});

Proprietà Specifiche di MouseEvent

Gli eventi del mouse (click, mouseenter, mousemove, ecc.) espongono proprietà aggiuntive:

Coordinate del Mouse

1
button.addEventListener('click', function(event) {
2
  // Coordinate relative alla finestra del browser
3
  console.log(event.clientX, event.clientY);
4

5
  // Coordinate relative all'elemento stesso
6
  console.log(event.offsetX, event.offsetY);
7
});

• clientX / clientY: coordinate relative al viewport del browser
• offsetX / offsetY: coordinate relative all’elemento su cui è avvenuto l’evento

Tasti Modificatori

1
button.addEventListener('click', function(event) {
2
  console.log(event.altKey);   // true se Alt era premuto
3
  console.log(event.ctrlKey);  // true se Ctrl era premuto
4
  console.log(event.shiftKey); // true se Shift era premuto
5
  console.log(event.metaKey);  // true se Cmd (Mac) o Win (Windows) era premuto
6
});

Queste proprietà permettono di implementare scorciatoie da tastiera o comportamenti diversi quando l’utente tiene premuti tasti modificatori.

Pulsante del Mouse

1
button.addEventListener('click', function(event) {
2
  console.log(event.button);
3
  // 0 = sinistro, 1 = centrale, 2 = destro
4
});

relatedTarget

Per eventi come mouseenter e mouseleave, la proprietà relatedTarget indica l’elemento da cui proviene o verso cui va il mouse:

1
const div = document.querySelector('div');
2
const button = document.querySelector('button');
3

4
div.addEventListener('mouseenter', function(event) {
5
  console.log(event.relatedTarget); // Elemento da cui proviene il mouse
6
});

Utilizzare le Proprietà dell’Event

Un esempio pratico di utilizzo delle proprietà dell’event object:

1
const buttons = document.querySelectorAll('button');
2

3
buttons.forEach(button => {
4
  button.addEventListener('click', function(event) {
5
    // Disabilitare il pulsante cliccato
6
    event.target.disabled = true;
7

8
    console.log(`Clicked at coordinates: ${event.clientX}, ${event.clientY}`);
9
    console.log(`Alt key pressed: ${event.altKey}`);
10
  });
11
});

In questo esempio, event.target permette di identificare quale pulsante è stato cliccato senza dover creare listener separati per ciascun pulsante.

Event Propagation

Gli eventi in JavaScript seguono un meccanismo di propagazione che determina l’ordine in cui i listener vengono eseguiti quando un evento si verifica su un elemento annidato.

Le Due Fasi: Capturing e Bubbling

Quando si clicca su un elemento annidato (ad esempio, un pulsante dentro un div), il browser attraversa due fasi:

1. Capturing Phase (fase di cattura): dall’esterno verso l’interno
2. Bubbling Phase (fase di risalita): dall’interno verso l’esterno

1
<section>
2
  <div>
3
    <button>Click me</button>
4
  </div>
5
</section>

Quando si clicca il pulsante:

1. Capturing: il browser controlla se ci sono listener nella fase di cattura partendo da document → section → div → button
2. Bubbling: il browser controlla se ci sono listener nella fase di bubbling partendo da button → div → section → document

Bubbling Phase (Default)

Per default, tutti i listener registrati con addEventListener() sono nella bubbling phase:

1
const button = document.querySelector('button');
2
const div = document.querySelector('div');
3

4
button.addEventListener('click', function() {
5
  console.log('Clicked button');
6
});
7

8
div.addEventListener('click', function() {
9
  console.log('Clicked div');
10
});
11

12
// Output quando si clicca il pulsante:
13
// "Clicked button" (prima)
14
// "Clicked div" (dopo)

L’evento “risale” dall’elemento cliccato verso i suoi antenati, eseguendo i listener nell’ordine: elemento → parent → grandparent → …

Capturing Phase

Per registrare un listener nella capturing phase, si passa true come terzo argomento a addEventListener():

1
const button = document.querySelector('button');
2
const div = document.querySelector('div');
3

4
button.addEventListener('click', function() {
5
  console.log('Clicked button');
6
});
7

8
div.addEventListener('click', function() {
9
  console.log('Clicked div');
10
}, true); // true = capturing phase
11

12
// Output quando si clicca il pulsante:
13
// "Clicked div" (prima - capturing)
14
// "Clicked button" (dopo - bubbling)

La capturing phase viene eseguita prima della bubbling phase, quindi i listener in capturing hanno la priorità.

Quando Usare la Capturing Phase

La capturing phase è utile quando si vuole intercettare un evento prima che raggiunga l’elemento target:

1
// Intercettare tutti i click nella pagina prima che raggiungano gli elementi
2
document.addEventListener('click', function(event) {
3
  console.log('Click intercepted in capturing phase');
4
}, true);

Nella maggior parte dei casi, la bubbling phase è sufficiente e più intuitiva.

Controllo del Comportamento degli Eventi

L’oggetto Event fornisce metodi per controllare come l’evento si comporta: preventDefault() per bloccare il comportamento di default del browser e stopPropagation() per fermare la propagazione dell’evento.

preventDefault()

Il metodo preventDefault() impedisce il comportamento di default del browser per un evento specifico:

1
const form = document.querySelector('form');
2

3
form.addEventListener('submit', function(event) {
4
  event.preventDefault(); // Impedisce l'invio del form
5
  console.log('Form submission prevented');
6
});

Comportamenti di default comuni:

• Form submit: invio del form al server e ricaricamento della pagina
• Link click: navigazione verso l’URL del link
• Context menu (click destro): apertura del menu contestuale
• Drag and drop: comportamento di default del browser

Esempio con link:

1
const link = document.querySelector('a');
2

3
link.addEventListener('click', function(event) {
4
  event.preventDefault(); // Impedisce la navigazione
5
  console.log('Link click prevented');
6
  // Ora si può implementare una navigazione personalizzata
7
});

stopPropagation()

Il metodo stopPropagation() ferma la propagazione dell’evento agli elementi padre:

1
const button = document.querySelector('button');
2
const div = document.querySelector('div');
3

4
button.addEventListener('click', function(event) {
5
  event.stopPropagation(); // Ferma la propagazione
6
  console.log('Clicked button');
7
});
8

9
div.addEventListener('click', function() {
10
  console.log('Clicked div'); // Non verrà eseguito
11
});

Quando si clicca il pulsante, solo il listener del pulsante viene eseguito. L’evento non “risale” al div.

Quando usare stopPropagation():

• Si vuole che un click su un elemento interno non attivi listener sugli elementi padre
• Si implementa un sistema di modali o dropdown dove i click interni non devono chiudere il componente

stopImmediatePropagation()

Il metodo stopImmediatePropagation() ferma la propagazione e impedisce l’esecuzione di altri listener sullo stesso elemento:

1
const button = document.querySelector('button');
2

3
button.addEventListener('click', function(event) {
4
  event.stopImmediatePropagation();
5
  console.log('First listener');
6
});
7

8
button.addEventListener('click', function() {
9
  console.log('Second listener'); // Non verrà eseguito
10
});

Con stopPropagation(), tutti i listener sul pulsante verrebbero eseguiti, ma la propagazione si fermerebbe. Con stopImmediatePropagation(), anche gli altri listener sullo stesso elemento vengono ignorati.

Differenza tra preventDefault() e stopPropagation()

È importante comprendere la differenza:

• preventDefault(): blocca il comportamento di default del browser, ma l’evento continua a propagarsi
• stopPropagation(): ferma la propagazione, ma il comportamento di default può ancora verificarsi

1
// preventDefault() - blocca il comportamento ma l'evento propaga
2
link.addEventListener('click', function(event) {
3
  event.preventDefault(); // Non naviga, ma l'evento risale al parent
4
});
5

6
// stopPropagation() - ferma la propagazione ma il comportamento può verificarsi
7
button.addEventListener('click', function(event) {
8
  event.stopPropagation(); // Non risale, ma il comportamento di default può verificarsi
9
});

Eventi che Non Propagano

Non tutti gli eventi propagano. Alcuni eventi hanno la proprietà bubbles impostata su false:

1
button.addEventListener('mouseenter', function(event) {
2
  console.log(event.bubbles); // false - non propaga
3
});

Eventi che tipicamente non propagano:

• mouseenter / mouseleave
• focus / blur
• Alcuni eventi di drag and drop

Per verificare se un evento propaga, si può controllare la proprietà bubbles:

1
button.addEventListener('click', function(event) {
2
  if (event.bubbles) {
3
    console.log('Questo evento propaga');
4
  }
5
});

Event Delegation

L’event delegation è un pattern che sfrutta la propagazione degli eventi per gestire eventi su elementi dinamici o su liste di elementi usando un singolo listener registrato su un elemento padre.

Il Problema con Listener Multipli

Supponiamo di avere una lista di elementi su cui si vuole reagire ai click:

1
<ul>
2
  <li>Item 1</li>
3
  <li>Item 2</li>
4
  <li>Item 3</li>
5
  <li>Item 4</li>
6
  <li>Item 5</li>
7
</ul>

Un approccio ingenuo sarebbe aggiungere un listener a ciascun elemento:

1
const listItems = document.querySelectorAll('li');
2

3
listItems.forEach(item => {
4
  item.addEventListener('click', function() {
5
    item.classList.toggle('highlight');
6
  });
7
});

Problemi di questo approccio:

• Richiede di registrare molti listener (uno per elemento)
• Non funziona per elementi aggiunti dinamicamente dopo il caricamento della pagina
• Consumo maggiore di memoria e performance

Soluzione con Event Delegation

Con l’event delegation, si registra un singolo listener sull’elemento padre:

1
const list = document.querySelector('ul');
2

3
list.addEventListener('click', function(event) {
4
  // event.target è l'elemento effettivamente cliccato
5
  event.target.classList.toggle('highlight');
6
});

Vantaggi:

• Un solo listener invece di molti
• Funziona automaticamente per elementi aggiunti dinamicamente
• Migliore performance e consumo di memoria
• Codice più semplice e manutenibile

Gestire Elementi Annidati

Quando gli elementi della lista contengono elementi annidati, event.target potrebbe riferirsi a un elemento interno:

1
<ul>
2
  <li>
3
    <h2>Item 1</h2>
4
    <p>Description</p>
5
  </li>
6
</ul>

In questo caso, cliccando su <h2> o <p>, event.target sarà quell’elemento, non il <li>. Per risolvere, si usa closest() per trovare l’elemento padre desiderato:

1
const list = document.querySelector('ul');
2

3
list.addEventListener('click', function(event) {
4
  // Trova il <li> più vicino, anche se si è cliccato su un elemento interno
5
  const listItem = event.target.closest('li');
6

7
  if (listItem) {
8
    listItem.classList.toggle('highlight');
9
  }
10
});

closest() risale l’albero DOM partendo dall’elemento corrente e restituisce il primo elemento che corrisponde al selettore CSS fornito. Include anche l’elemento stesso se corrisponde al selettore.

Esempio Completo di Event Delegation

1
const list = document.querySelector('ul');
2

3
list.addEventListener('click', function(event) {
4
  const listItem = event.target.closest('li');
5

6
  if (listItem) {
7
    // Evidenzia l'intero elemento <li>, non solo la parte cliccata
8
    listItem.classList.toggle('highlight');
9

10
    // Si può anche accedere a dati specifici dell'elemento
11
    const itemId = listItem.dataset.id;
12
    console.log(`Clicked item with ID: ${itemId}`);
13
  }
14
});

Questo pattern è particolarmente utile quando:

• Si hanno liste dinamiche che cambiano nel tempo
• Si vogliono migliorare le performance riducendo il numero di listener
• Si vuole semplificare la gestione degli eventi

Trigger Programmatico di Eventi

A volte è necessario generare eventi programmaticamente invece di aspettare che l’utente interagisca con l’interfaccia. JavaScript permette di simulare eventi chiamando metodi specifici sugli elementi DOM.

Metodi per Triggerare Eventi

Molti elementi DOM espongono metodi che simulano interazioni dell’utente:

1
const button = document.querySelector('button');
2
const form = document.querySelector('form');
3

4
// Simulare un click sul pulsante
5
button.click();
6

7
// Simulare la submission di un form
8
form.submit();

Quando Usare il Trigger Programmatico

Esempi di casi d’uso:

1. Submit di form da codice:

1
const form = document.querySelector('form');
2
const submitButton = document.querySelector('button[type="submit"]');
3

4
// Submit programmatico quando si clicca un elemento esterno
5
document.querySelector('.external-trigger').addEventListener('click', function() {
6
  submitButton.click(); // Simula il click sul pulsante submit
7
});

2. Trigger di eventi dopo operazioni asincrone:

1
button.addEventListener('click', async function() {
2
  await someAsyncOperation();
3

4
  // Trigger di un altro evento dopo il completamento
5
  anotherButton.click();
6
});

Limitazioni del Trigger Programmatico

È importante notare che il trigger programmatico non è identico all’interazione dell’utente:

1
const form = document.querySelector('form');
2

3
form.addEventListener('submit', function(event) {
4
  event.preventDefault();
5
  console.log('Form submitted');
6
});
7

8
// Questo NON triggera il listener sopra
9
form.submit();
10

11
// Questo SÌ triggera il listener
12
const submitButton = form.querySelector('button[type="submit"]');
13
submitButton.click();

Quando si chiama form.submit() direttamente, il listener submit non viene eseguito. Per triggerare il listener, si deve simulare il click sul pulsante submit.

Eventi Generati Programmaticamente

Gli eventi generati programmaticamente hanno alcune caratteristiche:

1
button.addEventListener('click', function(event) {
2
  console.log(event.clientX, event.clientY);
3
  // 0, 0 quando generato programmaticamente
4
  // Coordinate reali quando generato dall'utente
5
});

Le coordinate del mouse saranno 0, 0 quando l’evento è generato programmaticamente, mentre conterranno le coordinate reali quando generato dall’utente.

Il Keyword this negli Event Listener

Quando si usa una funzione normale (non arrow function) come event listener, il browser imposta automaticamente this per riferirsi all’elemento su cui è registrato il listener.

Comportamento con Funzioni Normali

1
const button = document.querySelector('button');
2

3
button.addEventListener('click', function() {
4
  console.log(this); // button element
5
  console.log(this === button); // true
6
});

Con funzioni normali, this punta a event.currentTarget, cioè l’elemento su cui è registrato il listener.

Comportamento con Arrow Functions

1
const button = document.querySelector('button');
2

3
button.addEventListener('click', () => {
4
  console.log(this); // window (o undefined in strict mode)
5
});

Le arrow functions non hanno un proprio this e non possono essere riassegnate. In questo contesto, this manterrà il valore del contesto esterno (tipicamente window o undefined in strict mode).

Quando Usare Funzioni Normali vs Arrow Functions

Usa funzioni normali quando:

• Hai bisogno di accedere all’elemento tramite this
• Vuoi che il comportamento sia coerente con le convenzioni JavaScript

Usa arrow functions quando:

• Vuoi preservare il this del contesto esterno
• Preferisci una sintassi più concisa
• Non hai bisogno di accedere all’elemento tramite this (puoi usare event.currentTarget)

1
class MyComponent {
2
  constructor() {
3
    this.value = 42;
4
    this.button = document.querySelector('button');
5

6
    // Arrow function preserva 'this' del componente
7
    this.button.addEventListener('click', () => {
8
      console.log(this.value); // 42 - funziona!
9
    });
10

11
    // Funzione normale richiederebbe .bind()
12
    this.button.addEventListener('click', function() {
13
      console.log(this.value); // undefined - non funziona
14
    }.bind(this));
15
  }
16
}

Scroll Events

L’evento scroll viene generato quando l’utente scorre la pagina o un elemento scrollabile. È un evento che viene generato molto frequentemente e richiede attenzione per le performance.

Ascoltare Scroll Events

1
window.addEventListener('scroll', function(event) {
2
  console.log('Scrolling...');
3
});

L’evento scroll può essere registrato su window (per lo scroll della pagina) o su elementi scrollabili:

1
const scrollableDiv = document.querySelector('.scrollable');
2

3
scrollableDiv.addEventListener('scroll', function(event) {
4
  console.log('Div scrolled');
5
});

Performance e Throttling

L’evento scroll viene generato molto frequentemente durante lo scroll. Se si eseguono operazioni pesanti nel listener, si può rallentare la pagina:

1
// ❌ Operazione pesante ad ogni evento scroll
2
window.addEventListener('scroll', function() {
3
  // Operazione costosa che viene eseguita troppe volte
4
  heavyCalculation();
5
});

Soluzione: throttling o debouncing:

1
let ticking = false;
2

3
window.addEventListener('scroll', function() {
4
  if (!ticking) {
5
    window.requestAnimationFrame(function() {
6
      // Operazione eseguita solo quando necessario
7
      handleScroll();
8
      ticking = false;
9
    });
10
    ticking = true;
11
  }
12
});

Esempio: Infinite Scroll

Un caso d’uso comune è implementare lo infinite scroll, caricando contenuti quando l’utente si avvicina alla fine della pagina:

1
let curElementNumber = 0;
2

3
function scrollHandler() {
4
  // Distanza dal fondo del contenuto
5
  const distanceToBottom = document.body.getBoundingClientRect().bottom;
6

7
  // Altezza del viewport
8
  const viewportHeight = document.documentElement.clientHeight;
9

10
  // Se siamo a meno di 150px dal fondo, carica più contenuti
11
  if (distanceToBottom < viewportHeight + 150) {
12
    const newDataElement = document.createElement('div');
13
    curElementNumber++;
14
    newDataElement.innerHTML = `<p>Element ${curElementNumber}</p>`;
15
    document.body.append(newDataElement);
16
  }
17
}
18

19
window.addEventListener('scroll', scrollHandler);

Questo esempio crea nuovi elementi quando l’utente si avvicina al fondo della pagina, creando un effetto di scroll infinito.

Form Events

I form HTML espongono eventi specifici per gestire la submission e la validazione. L’evento più importante è submit, che viene generato quando l’utente invia il form.

Submit Event

L’evento submit viene generato quando:

• L’utente clicca un pulsante con type="submit" dentro un form
• L’utente preme Enter in un campo input del form
• Si chiama form.submit() programmaticamente (ma senza triggerare il listener)

1
<form id="myForm">
2
  <input type="text" name="title" id="title" />
3
  <button type="submit">Submit</button>
4
</form>

1
const form = document.querySelector('#myForm');
2

3
form.addEventListener('submit', function(event) {
4
  event.preventDefault(); // Impedisce l'invio al server
5

6
  // Validazione o elaborazione personalizzata
7
  const title = document.getElementById('title').value;
8
  console.log('Form submitted with title:', title);
9

10
  // Inviare dati via JavaScript (fetch API, XMLHttpRequest, ecc.)
11
});

Comportamento di Default

Per default, quando un form viene inviato:

1. I dati vengono inviati al server tramite HTTP POST o GET
2. La pagina viene ricaricata
3. I dati vengono persi se non gestiti correttamente

Usando preventDefault(), si può:

• Validare i dati prima dell’invio
• Inviare i dati via JavaScript (AJAX/fetch)
• Mostrare messaggi di errore senza ricaricare la pagina
• Implementare submission asincrona

Altri Eventi di Form

Altri eventi utili per i form:

• change: quando il valore di un input cambia e perde il focus
• input: quando il valore di un input cambia (in tempo reale)
• focus: quando un input riceve il focus
• blur: quando un input perde il focus

1
const input = document.querySelector('input');
2

3
input.addEventListener('input', function(event) {
4
  console.log('Valore cambiato:', event.target.value);
5
});
6

7
input.addEventListener('focus', function() {
8
  console.log('Input ha ricevuto il focus');
9
});
10

11
input.addEventListener('blur', function() {
12
  console.log('Input ha perso il focus');
13
});

Drag and Drop

Il drag and drop è un’interfaccia utente che permette di trascinare elementi e rilasciarli in aree specifiche. In JavaScript, questa funzionalità è implementata attraverso una serie di eventi coordinati.

Panoramica degli Eventi Drag and Drop

Un’operazione di drag and drop coinvolge diversi eventi:

1. dragstart: quando inizia il trascinamento (sull’elemento trascinato)
2. dragenter: quando l’elemento entra in un’area di drop
3. dragover: quando l’elemento è sopra un’area di drop (generato continuamente)
4. dragleave: quando l’elemento esce da un’area di drop
5. drop: quando l’elemento viene rilasciato sull’area di drop
6. dragend: quando termina l’operazione di drag (sull’elemento trascinato)

Passo 1: Rendere un Elemento Draggable

Per rendere un elemento trascinabile, si imposta l’attributo draggable a true:

1
<li draggable="true">Item 1</li>

Oppure programmaticamente:

1
const item = document.querySelector('li');
2
item.draggable = true;

Nota importante: draggable="true" è necessario. Solo aggiungere l’attributo senza valore non è sufficiente.

Passo 2: Gestire dragstart

Quando l’utente inizia a trascinare, si deve configurare l’evento dragstart:

1
const item = document.querySelector('li');
2

3
item.addEventListener('dragstart', function(event) {
4
  // Impostare i dati da trasferire
5
  event.dataTransfer.setData('text/plain', item.id);
6

7
  // Impostare l'effetto del drag (move, copy, link, ecc.)
8
  event.dataTransfer.effectAllowed = 'move';
9
});

dataTransfer.setData(): permette di associare dati all’operazione di drag. Questi dati saranno disponibili nell’evento drop.

Tipi di dati supportati:

• 'text/plain': testo semplice
• 'text/html': contenuto HTML
• 'text/uri-list': URL

effectAllowed: determina quale tipo di operazione è permessa ('move', 'copy', 'link', 'all', 'none'). Questo influisce sull’aspetto del cursore durante il drag.

Passo 3: Creare Zone di Drop

Per permettere il drop di un elemento, si devono gestire gli eventi dragenter e dragover sulla zona di drop:

1
const dropZone = document.querySelector('.drop-zone');
2

3
dropZone.addEventListener('dragenter', function(event) {
4
  // Verificare il tipo di dati
5
  if (event.dataTransfer.types[0] === 'text/plain') {
6
    event.preventDefault(); // Necessario per permettere il drop
7
    dropZone.classList.add('droppable');
8
  }
9
});
10

11
dropZone.addEventListener('dragover', function(event) {
12
  if (event.dataTransfer.types[0] === 'text/plain') {
13
    event.preventDefault(); // Necessario per permettere il drop
14
  }
15
});

Importante: preventDefault() è obbligatorio in dragover per permettere il drop. Senza di esso, il browser impedirà il drop per default.

dataTransfer.types: array che contiene i tipi di dati disponibili. Permette di verificare se i dati trascinati sono del tipo atteso.

Passo 4: Feedback Visivo

Si può aggiungere feedback visivo quando l’elemento entra o esce dalla zona di drop:

1
dropZone.addEventListener('dragenter', function(event) {
2
  if (event.dataTransfer.types[0] === 'text/plain') {
3
    event.preventDefault();
4
    dropZone.classList.add('droppable');
5
  }
6
});
7

8
dropZone.addEventListener('dragleave', function(event) {
9
  // Verificare che si stia realmente uscendo dalla zona
10
  if (!event.relatedTarget.closest('.drop-zone')) {
11
    dropZone.classList.remove('droppable');
12
  }
13
});

Nota su dragleave: questo evento viene generato anche quando si entra in un elemento figlio della zona di drop. Per gestirlo correttamente, si usa closest() per verificare se si è ancora dentro la zona.

Passo 5: Gestire il Drop

Quando l’elemento viene rilasciato, si gestisce l’evento drop:

1
dropZone.addEventListener('drop', function(event) {
2
  event.preventDefault();
3

4
  // Recuperare i dati impostati in dragstart
5
  const itemId = event.dataTransfer.getData('text/plain');
6

7
  // Eseguire l'operazione desiderata
8
  moveItemToDropZone(itemId, dropZone);
9

10
  // Rimuovere il feedback visivo
11
  dropZone.classList.remove('droppable');
12
});

dataTransfer.getData(): recupera i dati impostati in dragstart. Il tipo deve corrispondere a quello usato in setData().

Passo 6: Gestire dragend

L’evento dragend viene generato quando termina l’operazione di drag, indipendentemente dal successo del drop:

1
item.addEventListener('dragend', function(event) {
2
  // Verificare se il drop è riuscito
3
  if (event.dataTransfer.dropEffect === 'move') {
4
    console.log('Drop successful');
5
  } else {
6
    console.log('Drop cancelled');
7
  }
8
});

dataTransfer.dropEffect: indica il risultato dell’operazione ('move', 'copy', 'link', 'none'). Se è 'none', il drop non è riuscito.

Esempio Completo: Drag and Drop tra Liste

1
class ProjectItem {
2
  constructor(id) {
3
    this.id = id;
4
    this.connectDrag();
5
  }
6

7
  connectDrag() {
8
    const item = document.getElementById(this.id);
9

10
    item.addEventListener('dragstart', (event) => {
11
      event.dataTransfer.setData('text/plain', this.id);
12
      event.dataTransfer.effectAllowed = 'move';
13
    });
14

15
    item.addEventListener('dragend', (event) => {
16
      if (event.dataTransfer.dropEffect === 'none') {
17
        console.log('Drop cancelled');
18
      }
19
    });
20
  }
21
}
22

23
class ProjectList {
24
  constructor(type) {
25
    this.type = type;
26
    this.connectDroppable();
27
  }
28

29
  connectDroppable() {
30
    const list = document.querySelector(`#${this.type}-projects ul`);
31

32
    list.addEventListener('dragenter', (event) => {
33
      if (event.dataTransfer.types[0] === 'text/plain') {
34
        event.preventDefault();
35
        list.parentElement.classList.add('droppable');
36
      }
37
    });
38

39
    list.addEventListener('dragover', (event) => {
40
      if (event.dataTransfer.types[0] === 'text/plain') {
41
        event.preventDefault();
42
      }
43
    });
44

45
    list.addEventListener('dragleave', (event) => {
46
      if (event.relatedTarget.closest(`#${this.type}-projects ul`) !== list) {
47
        list.parentElement.classList.remove('droppable');
48
      }
49
    });
50

51
    list.addEventListener('drop', (event) => {
52
      event.preventDefault();
53
      const projectId = event.dataTransfer.getData('text/plain');
54

55
      // Verificare che il progetto non sia già in questa lista
56
      if (!this.projects.find(p => p.id === projectId)) {
57
        // Spostare il progetto
58
        this.moveProject(projectId);
59
      }
60

61
      list.parentElement.classList.remove('droppable');
62
    });
63
  }
64
}