Notes

DOM : écouteurs asynchrones d'événements

Date
—
cats
tags
techs

Déclarer un écouteur d'événement asynchrones peut avoir des effets indésirables si l'on n'y prend pas garde. C'est le cas par exemple lorsque plusieurs écouteurs écoutent le même événement sur le même élément.

Prenons un bouton simple :

<p><button id="my-button">click me !</button></p>

Attachons deux écouteurs d'événements :

const btn = window.document.getElementById('my-button');
btn.addEventListener('click', e => console.log('First listener'));
btn.addEventListener('click', e => console.log('Second listener'));

Les écouteurs sont a priori dépilés dans l'ordre dans lequel ils ont été attachés (FIFO) ; on aura donc l'affichage suivant :

First listener
Second listener

Faisons maintenant du premier écouteur un traitement asynchrone, qui doit attendre l'exécution d'une quelconque action pour lui-même effectuer ses traitements :

const btn = window.document.getElementById('my-button');
btn.addEventListener('click', async e => {
    await someAsyncAction();
    console.log('First listener');
});
btn.addEventListener('click', e => console.log('Second listener'));

Les traces seront alors différentes :

Second listener
First listener

Les traitements asynchrones arrivent (évidemment) après les traitements synchrones. A garder en mémoire, surtout si l'ordre d'exécution des écouteurs à un quelconque importance.