Nous voyons tous des sites Web magiques, n'est-ce pas ? En cliquant sur un bouton, puis le bouton change de couleur, change le type de bordure ou ainsi de suite, mais savez-vous comment cela fonctionne dans les coulisses ?

Tout d'abord, nous devrions parler du DOM. Alors, qu'est-ce que le DOM ?
Vous pouvez considérer DOM (Document Object Model) comme une interface entre le navigateur et le code javascript. Il nous permet de faire interagir javascript avec le navigateur.

Il existe également un arbre DOM qui est généré à partir d'un document HTML et grâce à cela, nous modifions dynamiquement les choses sur la page.

Comment DOM s'est-il organisé dans les coulisses ?

Ainsi, tout dans l'arborescence DOM est représenté par un objet qui est Node.Node hérite des méthodes prototypes d'EventTarget et comme cela, nous pouvons ajouter des écouteurs d'événements ou d'autres choses.
Ce schéma nous montre la hiérarchie de l'API DOM et vous pouvez le considérer comme un héritage de haut en bas. Element, Text, Comment prend des méthodes de Node. Node prend des méthodes de EventTarget… L'exemple parfait
pour Protype Chain et Introduction to Synthetic OOP JS.

Tapons ceci ;
console.dir(nœud)

Dans l'objet prototype de la fonction du constructeur de nœud, vous pouvez voir les méthodes. Si vous voulez voir la hiérarchie de l'héritage de haut en bas ;

console.dir(HTMLElement.__proto__.__proto__)

En fait, même HTMLElement est une fonction constructeur, nous pouvons voir que nous pouvons en prendre le prototype car chaque objet en Javascript a un prototype.

Bullage et capture d'événements :

Disons que nous cliquons sur un bouton et que pour le bouton il y a un écouteur d'événement, mais est-ce que l'événement se produit dans cet élément ?Hell no…
Lorsque nous ajoutons un écouteur d'événement à n'importe quel nœud ;

document.getElementByID().addEventListener …

L'événement se produit dans EventTarget.
Même la méthode provient de l'objet prototype dans Event Target.
Après le déclenchement de l'événement, la phase de capture commence là où l'événement se déplace ensuite de l'itinéraire du document à l'élément cible.
Quand c'est au bon nœud, la phase cible commence et avec la phase cible, nous pouvons gérer l'événement avec la fonction de rappel.

Ensuite, je veux dire que nous avons déclenché l'événement, l'événement extrait de EventTarget au nœud que nous avons géré avec le rappel, maintenant il commence à bouillonner.
Comme un ballon.
Du nœud cible à EventTarget.
Période de ce processus s'il y a un autre eventListener aussi ils seront appelés.
Pour éviter cela, nous avons une méthode spéciale qui est ;

document.getElementByID().addEventListener("click",
                                   (myEvent)=>myEvent.stoppropagation())