écouteur d'événement Javascript - exécuter du code après la fin de l'événement bouillonnement

Question

Je voudrais lancer un code après la fin de l'événement à bouillonner le DOM par exemple

document.getElementById("myBtn").addEventListener("click", (event) => { 
     // run some code after event finish to bubble up 
}); 

Answer 1

Vous avez au moins deux choix:

1. File d'attente

   une tâche async (setTimeout ou une résolution Promise)

2. gérer l'événement sur document, mais seulement si elle passe par #myBtn en route vers elle; ce n'est pas techniquement quand il est bouillonnement complètement achevé, juste à l'étape finale de celui-ci

Notez que certaines actions qui doivent être en réponse à un événement utilisateur (comme l'ouverture d'une fenêtre) peut ou ne fonctionne pas aveC# 1.

est ici # 1 en utilisant une promesse:

document.getElementById("myBtn").addEventListener("click", (event) => { 
    Promise.resolve().then(_ => { 
     // Do the work here 
    }); 
}); 

L'avantage d'utiliser une résolution de promesse est que sur les navigateurs conformes, la résolution de la promesse sera exécutée avant tout autre événement en file d'attente. (Résolutions Promise sont microtâches qui courent après la tâche en cours, mais avant la tâche suivante.)

est ici # 2:

document.addEventListener("click", (event) => { 
    var node = event.target; 
    while (node.id !== "myBtn") { 
     if (node === document.body) { 
      return; // Didn't pass through #myBtn 
     } 
     node = node.parentNode; 
    } 
    // Do the work here 
}); 

Answer 2

Ensuite, vous devez ajouter un écouteur d'événement à l'objet du document, qui est le dernier "élément" DOM ​​qui reconnaît un événement, tous les événements auront passé au document.