Évènements personnalisés

Voir la vidéo
Description Sommaire

En plus des évènements natif il est possible d'émettre des évènements personnalisé sur des éléments HTML. Ces évènements pourront ensuite être écouté avec la méthode addEventListener. Ce système d'évènement personnalisé est très pratique pour simplifier la logique de notre application.

Pour créer un évènement personnalisé on utilisera l'objet CustomEvent que l'on pourra initialiser avec 1 ou 2 paramètre.

  • Le premier paramètre contiendra le nom de notre évènement
  • Le second paramètre sera un objet d'option (optionnel) qui définira le comportement de l'évènement et permettra aussi de passer des informations.
    • details permet d'attacher des informations à notre évènement.
    • cancelable indique que l'évènement pourra être annulé à l'aide d'un preventDefault(), on pourra récupérer l'état d'annulation de l'évènement à l'aide de la propriété defaultPrevented.
    • bubbles indique si l'évènement est propagé ou non.

Une fois cet évènement créé il peut être émis depuis n'importe quel élément HTML.

const li = document.querySelector('li')
li.dispatchEvent(new CustomEvent('toggle', {
    details: {id: 3},
    bubbles: true
}))

La méthode dispatchEvent() est synchrone et les écouteurs attachés seront éxécuté avant de continuer le fil principal de l'éxécution. On peut par exemple voir si notre évènement a été annulé pour effectuer ou non le comportement initial prévu.

const event = new CustomEvent('delete', {
    details: {id: 3},
    bubbles: true,
    cancelable: true
})
li.dispatchEvent(event)
if (!event.defaultPrevented) {
    li.remove()
}
Publié
Technologies utilisées
Auteur :
Grafikart
Partager