Alpine e gestione avanzata degli eventi

Per sfruttare appieno la direttiva x-on, Alpine fornisce una serie di modificatori che permettono di personalizzare con precisione la gestione degli eventi. Questi modificatori sono particolarmente utili nello sviluppo di applicazioni interattive.

I modificatori della direttiva x-on di Alpine

Nella lezione precedente abbiamo analizzato il modificatore .prevent del nostro framework JavaScript, equivalente a preventDefault(). Analizziamo ora altri modificatori della direttiva x-on.

.stop

In modo simile a stopPropagation(), .stop interrompe immediatamente la propagazione di un evento.

<div x-data="{ messaggio: '' }">
	<div @click="messaggio = 'Hai cliccato sulla div'">
		<button @click.stop="messaggio = 'Hai cliccato sul pulsante'">Clicca qui</button>
	</div>
	<p x-text="messaggio"></p>
</div>

• Se l'utente fa clic sull'elemento div, ma non sul pulsante, il testo del paragrafo visualizzerà il primo messaggio.
• Se l'utente fa clic sul pulsante, verrà visualizzato il secondo messaggio. Se non avessimo utilizzato .stop avremmo visto il primo messaggio in entrambi i casi. Questo perché il modificatore .stop impedisce la propagazione dell'evento click dal pulsante all'elemento genitore.

.outside

.outside permette di ascoltare un evento al di fuori dell'elemento a cui è assegnato. Ecco un caso in cui il modificatore .outside può essere utile:

<nav x-data="{ open: false }">
	<button @click="open = !open">Menu</button>
	<ul x-show="open" @click.outside="open = false">
		<li><a href="#">Home</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Shop</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>

Questo è un semplice menu a scomparsa. Facendo clic sul pulsante il valore della variabile open cambia da false a true e viceversa. Una volta visualizzata la lista, facendo clic all'interno dell'elemento ul non succede nulla, ma se si fa clic all'esterno della lista, open torna ad essere false e la lista scompare.

.window e .document

Il modificatore .window fa sì che Alpine registri l'event listener sull'oggetto window invece che sull'elemento che lo contiene:

<div x-data="{ messaggio: '' }">
	<input type="text" @keyup.enter.window="messaggio = 'Hai premuto Invio!'">
	<p x-text="messaggio"></p>
</div>

Con questo codice, ovunque sulla pagina vi sia il focus, digitando invio viene aggiornato e visualizzato il contenuto del messaggio.

.document funziona in modo simile a .window, con la differenza che, mentre .window intercetta eventi a livello della finestra, .document restringe l'ambito agli eventi che avvengono all'interno del documento.

.debounce e .throttle in Alpine

Supponiamo di voler eseguire una richiesta dati quando l'utente digita qualcosa in un campo di testo. Se dovessimo eseguire l'operazione ad ogni digitazione, avremmo conseguenze negative sia sull'esperienza utente che sulle prestazioni del sito.

Il modificatore .debounce interrompe per un certo tempo (di default 250ms) l'esecuzione di un'azione, raggruppando le chiamate. Invece di eseguire l'operazione immediatamente, attende che trascorra un certo lasso di tempo dall'ultimo evento per poi eseguire l'operazione. La richiesta sarà inviata solo decorso il tempo stabilito dal verificarsi dell'ultimo evento.

Il tempo di attesa è fissato di default a 250ms, ma può essere personalizzato come mostrato di seguito:

<div x-data="searchComponent()">
	<!-- Input con debounce di 500ms -->
	<input
		type="text"
		x-model="searchTerm"
		@input.debounce.500ms="performSearch"
		placeholder="Cerca..."
	>
	<p>Termine cercato: <span x-text="searchTerm"></span></p>
	<p>Ultimo aggiornamento: <span x-text="lastUpdated"></span></p>
</div>
<script>
	document.addEventListener('alpine:init', () => {
		Alpine.data('searchComponent', () => ({
			searchTerm: '',
			lastUpdated: '',
			performSearch() {
				this.lastUpdated = new Date().toLocaleTimeString();
				console.log('Chiamata effettuata:', this.searchTerm);
			}
		}));
	});
</script>

In questo esempio, @input.debounce.500ms invoca performSearch dopo 500ms dal verificarsi dell'ultimo evento input sul campo di testo.

.throttle è simile a .debounce, ma con la differenza che non attende il verificarsi dell'ultimo evento per raggruppare le richieste. In altre parole .throttle non aspetta che l'utente smetta di interagire ed esegue la richiesta ad intervalli regolari.

Se, nel codice precedente, sostituiamo @input.debounce.500ms con @input.throttle.500ms, nella console del browser vedremo diversi intervalli di esecuzione delle richieste.

.self

Oltre a quelli descritti, Alpine dispone di diversi altri modificatori che permettono di agire sul DOM.

.self fa sì che un evento venga gestito da uno specifico elemento e solo se l'evento è originato da quell'elemento. In pratica, l'event listener a cui è assegnato reagisce ad un evento solo se questo origina sullo specifico elemento su cui è stato dichiarato e non su un elemento figlio o genitore.

<div x-data>
	<div @click="console.log('Hai cliccato sulla div!')">
		<button @click.self="console.log('Hai cliccato sul pulsante!')">Cliccami</button>
	</div>
</div>

Nell'esempio qui sopra, facendo clic sulla div all'esterno del pulsante, viene stampato il primo messaggio. Facendo clic sul pulsante, vengono stampati entrambi i messaggi.

Per una panoramica più completa dei modificatori della direttiva x-on, si rinvia alla documentazione online.

Eventi custom in Alpine.js

Gli event listener di Alpine sono dei contenitori per eventi DOM nativi. In quanto tali, possono ascoltare anche eventi custom. Un evento custom è definito dall'utente per gestire interazioni personalizzate tra diverse parti di un'applicazione.

Gli eventi custom vengono emessi con il metodo speciale $dispatch, sono intercettati tramite x-on e possono trasportare dati aggiuntivi tramite l'oggetto detail dell'evento.

Quello che segue è un semplice esempio in cui, al clic su un pulsante, viene emesso un evento increment:

<div x-data="{ count: 0 }" @increment="count += $event.detail.value">
	<button @click="$dispatch('increment', { value: 1 })">Incrementa</button>
	<div x-text="count"></div>
</div>

• $dispatch emette l’evento increment al clic sul pulsante;
• il genitore con @increment intercetta l'evento e aggiorna il valore di count di 1;
• La div con x-text="count" mostra il valore aggiornato.

Si noti che per intercettare correttamente un evento custom, per il modo in cui funziona la propagazione degli eventi, è necessario che sia un elemento genitore ad intercettare l'evento custom (nel caso di bubbling) o un evento figlio (nel caso di capturing).