Écoute des événements dans Vue.js

Introduction#

Dans Vue.js, il est possible d'écouter les événements du DOM et d'exécuter du code JavaScript en réponse à ces événements. Cela permet d'interagir avec l'utilisateur et de rendre les applications plus dynamiques. Dans ce chapitre, nous allons explorer les différentes méthodes pour écouter les événements dans Vue.js.

Handlers inline#

Les handlers inline sont utilisés dans les cas simples où la logique de l'événement est courte et directe. Ils peuvent être utilisés pour exécuter du code JavaScript directement dans le template. Par exemple, pour incrémenter une variable count lorsqu'un bouton est cliqué, nous pouvons utiliser le code suivant :

<script setup>
import { ref } from 'vue';

// Déclaration du ref réactif
const count = ref(0);
</script>

<template>
  <div>
    <button @click="count++">Incrémenter</button>
    <p>{{ count }}</p>
  </div>
</template>

Dans cet exemple, nous utilisons la directive @click pour écouter l'événement de clic sur le bouton et exécuter l'expression count++ pour incrémenter la variable count. La valeur de count est ensuite affichée dans le paragraphe.

Handlers de méthode#

Les handlers de méthode sont utilisés lorsque la logique de l'événement est plus complexe ou nécessite un traitement supplémentaire. Plutôt que d'exécuter du code directement dans le template, nous pouvons définir une méthode dans le composant et l'appeler en tant que handler d'événement. Voici un exemple :

<script setup>
// Définition de la fonction greet
function greet() {
  alert('Bonjour !');
}
</script>

<template>
  <div>
    <button @click="greet">Saluer</button>
  </div>
</template>

Dans cet exemple, nous définissons une méthode greet qui affiche une boîte de dialogue avec le message "Bonjour !". Lorsque le bouton est cliqué, la méthode greet est appelée en tant que handler d'événement.

Passer des arguments aux handlers de méthode#

Il est possible de passer des arguments personnalisés aux handlers de méthode. Cela permet d'effectuer des actions spécifiques en fonction du contexte de l'événement. Voici un exemple :

<script setup>
// Définition de la fonction say
function say(message) {
  alert(message);
}
</script>

<template>
  <div>
    <button @click="say('hello')">Dire bonjour</button>
    <button @click="say('bye')">Dire au revoir</button>
  </div>
</template>

Dans cet exemple, nous utilisons la méthode say pour afficher un message personnalisé en fonction du bouton cliqué.

Accéder à l'objet d'événement#

Parfois, il est nécessaire d'accéder à l'objet d'événement d'origine dans un handler. Cela peut être utile pour effectuer des opérations supplémentaires ou accéder à des informations spécifiques sur l'événement. Voici un exemple :

<script setup>
// Définition de la fonction warn
function warn(message, event) {
  if (event) {
    event.preventDefault();
    console.log(event.target);
  }
  alert(message);
}
</script>

<template>
  <div>
    <button @click="warn('Le formulaire ne peut pas encore être soumis.', $event)">Soumettre</button>
  </div>
</template>

Dans cet exemple, nous utilisons la méthode warn pour afficher un message d'avertissement et empêcher le comportement par défaut du formulaire lorsqu'il est soumis. Nous accédons à l'objet d'événement en utilisant le paramètre $event.

Modificateurs d'événement#

Les modificateurs d'événement permettent de gérer facilement les détails de l'événement sans mélanger la logique des données. Ils sont utilisés avec la directive v-on ou son raccourci @. Voici quelques modificateurs d'événement couramment utilisés :

• .stop : arrête la propagation de l'événement.
• .prevent : empêche le comportement par défaut de l'événement.
• .self : déclenche le handler uniquement si l'élément lui-même est cliqué.
• .capture : utilise le mode de capture lors de l'ajout de l'écouteur d'événement.
• .once : déclenche le handler une seule fois.
• .passive : indique au navigateur que l'événement ne sera pas annulé.

Voici un exemple d'utilisation des modificateurs d'événement :

<script setup>
// Définition des fonctions
function doThis() {
  // Code à exécuter pour "doThis"
}

function onSubmit() {
  // Code à exécuter pour "onSubmit"
}

function doThat() {
  // Code à exécuter pour "doThat"
}
</script>

<template>
  <div>
    <a @click.stop="doThis">Lien</a>
    <form @submit.prevent="onSubmit">Formulaire</form>
    <a @click.stop.prevent="doThat">Lien avec plusieurs modificateurs</a>
  </div>
</template>

Dans cet exemple, nous utilisons différents modificateurs d'événement pour contrôler le comportement des handlers.

#