Les événements

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: '👋'
})