Event.
Bloque l’action par défaut du navigateur pour un événement, par ex. l’envoi d’un formulaire ou le suivi d’un lien.
- Renvoie
undefined
Exemple
#const form = document.querySelector('#login')
form.addEventListener('submit', (event) => {
event.preventDefault()
const data = new FormData(form)
console.log('Envoi via fetch :', data.get('email'))
console.log('La page ne va pas se recharger :', event.defaultPrevented)
})
form.requestSubmit()La dernière ligne envoie le formulaire depuis le code, pour que le résultat apparaisse immédiatement. Cliquer sur le bouton dans l’aperçu fait la même chose.
Définition et utilisation
#Beaucoup d’événements ont une réaction par défaut du navigateur : cliquer sur un lien ouvre une nouvelle adresse, envoyer un formulaire recharge la page, et cliquer sur une case à cocher change son état. Appeler event.preventDefault() dans la fonction de gestion bloque cette réaction, ce qui vous permet de gérer la situation vous-même.
L’exemple le plus courant est un formulaire : vous bloquez le rechargement de la page, vérifiez les données et les envoyez avec fetch(). La propriété event.defaultPrevented permet de vérifier si l’action par défaut a déjà été bloquée.
preventDefault() n’arrête pas la propagation de l’événement vers les éléments parents, c’est le rôle de stopPropagation(). Elle n’a pas non plus d’effet dans un écouteur ajouté avec l’option passive: true, ni pour des événements qui ne peuvent pas être annulés (event.cancelable vaut alors false).
Syntaxe
#event.preventDefault()Plus d’exemples
#const more = document.querySelector('#more')
more.addEventListener('click', (event) => {
event.preventDefault()
console.log('Je charge d’autres cours sans changer de page')
})
more.click()const terms = document.querySelector('#terms')
terms.addEventListener('click', (event) => {
event.preventDefault()
console.log('Lisez d’abord le règlement')
})
terms.click()
console.log(terms.checked)Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Dans la gestion d’un formulaire, appelez
preventDefault()tout au début de la fonction. Si une erreur survient plus loin, la page ne se rechargera quand même pas. - Ne bloquez pas l’action par défaut sans raison. Les liens et les boutons doivent se comporter comme l’utilisateur s’y attend, y compris au clavier.
- Pour arrêter la propagation d’un événement vers les parents, utilisez
stopPropagation(), paspreventDefault().
Entrées associées
#- EventTarget.addEventListener()Enregistre une fonction appelée à chaque fois qu’un événement se produit sur un élément, par ex. un clic.
- Event.targetL’élément sur lequel l’événement s’est réellement produit, par ex. le bouton cliqué à l’intérieur d’une liste.
- FormDataRassemble les valeurs des champs d’un formulaire en paires nom-valeur. L’objet obtenu peut être lu ou envoyé au serveur avec fetch().
- fetch()Envoie une requête HTTP et renvoie une promesse avec la réponse du serveur (un objet Response).
- document.querySelector()Renvoie le premier élément qui correspond à un sélecteur CSS, ou null si rien ne correspond.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.