Formation Apprendre le JavaScript : Évènements personnalisés

En plus des évènements natifs il est possible d'émettre des évènements personnalisés sur des éléments HTML. Ces évènements pourront ensuite être écoutés 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és 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()
}