Les événements 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: '👋'
})
Aller plus loin

Vous pouvez aussi étendre cette classe CustomEvent pour créer vos propres événements… chiche ?

Félicitations !

Maintenant que vous avez vu les concepts principaux… prêt.e à créer une appli de to-do list ?