Événements
Alpine simplifie l'écoute des événements du navigateur et la réaction à ces événements.
Écouter des événements simples
Avec x-on, vous pouvez écouter les événements du navigateur déclenchés sur un élément ou à l'intérieur de celui-ci.
Voici un exemple basique d'écoute d'un clic sur un bouton :
<button x-on:click="console.log('clic')">...</button>
Vous pouvez aussi utiliser la syntaxe abrégée @. Voici le même exemple avec cette syntaxe (que nous utiliserons désormais) :
<button @click="...">...</button>
En plus de click, vous pouvez écouter n'importe quel événement du navigateur par son nom. Par exemple, @mouseenter, @keyup, etc. sont des syntaxes valides.
Écouter des touches précises
Supposons que vous souhaitiez détecter l'appui sur la touche enter dans un élément <input>. Alpine le rend facile avec le modificateur .enter :
<input @keyup.enter="...">
Vous pouvez même combiner des modificateurs de touches pour écouter des combinaisons, comme appuyer sur enter en maintenant shift :
<input @keyup.shift.enter="...">
Empêcher le comportement par défaut
Lorsque vous réagissez à des événements du navigateur, il est souvent nécessaire d'« empêcher le comportement par défaut » (« prevent default »).
Par exemple, si vous voulez écouter l'envoi d'un formulaire tout en empêchant le navigateur d'envoyer la requête, utilisez .prevent :
<form @submit.prevent="...">...</form>
Vous pouvez également appliquer .stop pour obtenir l'équivalent de event.stopPropagation().
Accéder à l'objet événement
Il peut arriver que vous souhaitiez accéder à l'objet événement natif du navigateur dans votre code. Pour cela, Alpine injecte automatiquement une variable magique $event :
<button @click="$event.target.remove()">Supprimez-moi</button>
Émettre des événements personnalisés
En plus d'écouter les événements du navigateur, vous pouvez aussi en émettre. C'est très utile pour faire communiquer des composants Alpine entre eux ou pour déclencher des événements dans des outils extérieurs à Alpine.
Alpine fournit pour cela un utilitaire magique appelé $dispatch :
<div @foo="console.log('foo a été émis')">
<button @click="$dispatch('foo')"></button>
</div>
Comme vous le voyez, lorsque le bouton est cliqué, Alpine émet un événement du navigateur nommé « foo », que notre écouteur @foo placé sur le <div> reçoit pour y réagir.
Écouter des événements sur window
Du fait du fonctionnement des événements dans le navigateur, il est parfois utile d'écouter les événements sur l'objet window de plus haut niveau.
Cela permet de faire communiquer des composants entre eux, comme dans l'exemple suivant :
<div x-data>
<button @click="$dispatch('foo')"></button>
</div>
<div x-data @foo.window="console.log('foo a été émis')">...</div>
Dans l'exemple ci-dessus, si nous cliquons sur le bouton du premier composant, Alpine émet l'événement « foo ». Selon le fonctionnement des événements du navigateur, ils « remontent » (bubbling) à travers les éléments parents jusqu'à window.
Comme notre second composant écoute « foo » sur window (avec .window), lorsque le bouton est cliqué, cet écouteur le capte et affiche le message « foo a été émis » dans la console.
Traduction française de la documentation officielle d'Alpine.js (licence MIT) – https://alpinejs.dev