6.7: Conclusion: HTML généré et bubbling

Que ce soit pour le panier ou pour le tableau joueur, on a deux situations où:

  • du « HTML » est généré au fur et à mesure (des parfums sont ajoutés au panier, des joueurs sont ajoutés au tableau)
  • on veut interagir avec ce « HTML généré »

Dans ces deux cas on ne peut pas utiliser addEventListener au démarrage de la page, car les éléments (panier: <li>, joueurs: <tr>) n'existent pas encore. On exploite alors le bubbling: on utilise addEventListener sur un parent qui existe au démarrage (panier: <ul>, joueurs: <table>).

On aura donc du code de ce type:

unParent.addEventListener('exemple', function(event){
    if( /* c'est n'est pas l'élément descendant souhaité */ ) { return; }
});

Cette approche est très courante. En particulier, c'est le cas des programmes AJAX (qu'on verra plus tard) qui génèrent beaucoup de HTML en cours d’exécution.