Les événements
Un évènement peut être déclenché par l’utilisateur (clic avec la souris, appui sur une touche du clavier) ou par le développeur.
Il existe de nombreux événements, nous allons voir quelques uns des plus importants ici.
Écouter l’événement 'click'
Le développeur peut par exemple vouloir invoquer une fonction lors du clic sur un élément de la page.
Pour cela, il faudra ajouter un écouteur d’événement et lui donner une fonction de rappel (callback) à exécuter :
html
<html>
<head>
<title>Exemple simple de gestion d’événement 'click'</title>
</head>
<body>
<h1>Événements</h1>
<button id="btn">
Cliquer ici pour incrémenter le compteur
</button>
<p id="result">
</p>
<script>
document.querySelector('#btn') // Récupération de l’élément qui a pour id 'btn'
.addEventListener( // Ajout d’un écouteur d’événement...
'click', // ...de type 'click'...
function (event) { // ... avec une fonction de rappel qui recevra forcément l’événement en premier argument
console.log('Bouton cliqué !')
setCounter(1 + parseInt(resultEl.innerHTML))
}
)
const resultEl = document.querySelector('#result')
function setCounter (init = 0) {
let counter = init
resultEl.innerHTML = counter
}
setCounter()
</script>
</body>
</html>Les événements 'blur', 'focus', 'input' et 'submit'
Il est souvent intéressant d’écouter les événements 'blur', 'focus', et 'input' d’une balise <input>, <select>, ou <textarea>, ainsi que l’événement 'submit' d’une balise <form>.
vue
<script lang="ts" setup>
import { ref } from 'vue'
const name = ref('')
const lastMessage = ref('')
function onSubmit() {
lastMessage.value = `Submitted: name=${name.value}`
}
</script>
<template>
<div>
<form @submit.prevent="onSubmit">
<label for="name">
Nom :
</label>
<input
id="name"
v-model="name"
placeholder="Alan Smithee"
@blur="lastMessage = 'champ de saisie a perdu le focus'"
@focus="lastMessage = 'champ de saisie a le focus'"
@input="lastMessage = 'changement de la valeur du champ de saisie'"
>
{{ name }}
<p class="my-4">
<button type="submit">
Envoyer
</button>
</p>
</form>
<p>
{{ lastMessage }}
</p>
</div>
</template>
<style scoped>
input, button {
padding: 0.25rem 0.5rem;
border: 1px solid #ccc;
border-radius: 0.25rem;
}
</style>