Il existe, en JavaScript, des événements natifs qui permettent de détecter des actions sur les éléments du DOM comme le clic, le mouvement de la souris ou le scroll… mais saviez-vous que vous pouvez aussi définir vos propres événements ?
Les événement natifs
Revoyons d’abord comment capturer un événement :
const lien = document.querySelector('#titre > a')
lien.addEventListener('click', (event) => {
event.preventDefault()
})
Plutôt simple, n’est-ce pas ?
Et si on voulait récupérer l’événement ailleurs, tout en s’assurant que ce même lien a été cliqué ?
const lien = document.querySelector('#titre > a')
document.addEventListener('click', (event) => {
if (lien === event.originalTarget) {
// Le lien a été cliqué !
}
})
Attention, si votre cible contient des éléments enfants, ce seront peut-être eux la cible d’origine de l’événement !
document.addEventListener('click', (event) => {
if (lien === event.originalTarget || lien.contains(event.originalTarget)) {
// Le lien ou un de ses descendants a été cliqué !
}
})
Les custom events
Si vous souhaitez diffuser des événements personnalisés, pour diffuser des informations propres à vos composants, il existe une class nommée CustomEvent :
const monEvenement = new CustomEvent('bonjour')
this.dispatchEvent(monEvenement) // On diffuse l'événement
Si vous avez besoin de passer des informations plus détaillées, vous pouvez renseigner l’option detail :
const monEvenement = new CustomEvent('bonjour', {
bubbles: true, // Indique à l'événement qu'il doit remonter le DOM
detail: '👋' // On peut passer n'importe quelle valeur dans cette propriété
})
Et les récupérer via la même propriété de l’événement :
document.addEventListener('bonjour', (event) => {
event.detail // "👋"
})
Si votre événement doit traverser le Shadow DOM il faudra penser à utiliser l’option composed, sinon il sera uniquement diffusé au sein de votre composant :
const monEvenement = new CustomEvent('bonjour', {
composed: true,
detail: '👋'
})