Comprendre brièvement le bouillonnement, la délégation, la liaison et la propagation des événements JavaScript

Événements bouillonnants

1.  : le bouillonnement d'événements signifie que l'événement est initialement reçu par l'élément le plus spécifique puis se propage vers des nœuds moins spécifiques.
2. La diffusion d'événements est activée par défaut, mais la diffusion d'événements peut être contrôlée via le code js.

Caractéristiques :

• Lorsque notre fonction événementielle est déclenchée, la fonction événementielle recevra en fait un objet événement.

• Lorsque nous exécutons la méthode event.stopPropagation() dans notre fonction d'événement, le bouillonnement d'événements se termine ici.

• Tous les types d’événements ne prennent pas en charge le bouillonnement d’événements.

• La diffusion d'événements ne déclenchera que des fonctions événementielles du même type.

Deux manières d'éviter les événements bouillonnants

Il existe deux manières d'empêcher les événements bouillonnants : l'une est une propriété et l'autre est une méthode.

CancelBubble

définit ou renvoie si l'événement doit être propagé au niveau supérieur.

Syntaxe : event.cancelBubble = true;

stopPropagation()

empêche l'événement de se propager davantage dans le flux d'événements.

Syntaxe : event.stopPropagation();

Exemple : Liez les fonctions de réponse au clic à trois objets qui sont mutuellement parent et enfant.

window.onload = fonction(){
      var span = document.getElementById("sp");
      span.onclick = fonction(){
          alert('balise span');
          
      }
      var box = document.getElementById('box3');
      box3.onclick = fonction(){
          alerte('box3');
      }
      var body = document.body;
      corps.onclick = fonction(){
          alerte('corps');
      }}

Empêcher les bulles pour la boîte :

window.onload = fonction(){
      var span = document.getElementById("sp");
      span.onclick = fonction(){
          alert('balise span');
          
      }
      var box = document.getElementById('box3');
      box3.onclick = fonction (événement) {
          alerte('box3');
           event.stopPropagation();

      }
      var body = document.body;
      corps.onclick = fonction(){
          alerte('corps');
      }}

Délégation d'événements

Lorsque nous avons un tas de sous-balises avec les mêmes événements, nous pouvons leur ajouter des événements en parcourant les sous-balises, mais si un nouvel élément de sous-balise est ajouté, nous devons relier la nouvelle sous-balise élément, sinon il n'est pas valide.

L'attribut

lie l'événement à l'élément ancêtre , de sorte que lorsque l'événement sur l'élément enfant est déclenché, il remontera jusqu'à l'élément ancêtre et l'événement sera traité via l'événement de réponse de l'élément ancêtre. Grâce au bullage et à la délégation, vous pouvez réduire le nombre de liaisons d'événements et améliorer les performances du programme.

Récupérez l'élément cliqué.

Après avoir lié un événement à l'élément ancêtre, quel que soit l'élément sur lequel nous cliquons dans l'élément ancêtre, l'événement correspondant sera déclenché. Nous espérons seulement que l'événement sera déclenché lorsque nous cliquons sur un élément dans l'ancêtre. élément. À ce stade, nous devons donner une condition de jugement, si c'est l'élément que nous voulons déclencher l'événement.

target

renvoie l'élément qui a déclenché l'événement.

Syntaxe : event.taget;

window.onload = fonction(){
     var ul = document.getElementById('ul1');
     ul.onclick = fonction (événement) {
         si(event.target.className == 'abq'){
             alert('Événement déclenché !!')
         } 
     }
     //Ajouter un lien hypertexte document.getElementById('bt1').onclick = function(){
         var li = document.createElement('li');
         li.innerHTML = "<a href = 'javascript:;' class='abq'>Nouvelle balise</a>";
         ul.appendChild(li);
     }
 }

Lier des événements via addEventListener()

Grâce à cette méthode, vous pouvez lier plusieurs fonctions de réponse à un événement identiques au même élément.

• Paramètres :

1. La chaîne de l'événement, n'utilisez pas la
2. fonction de rappel. Cette fonction sera appelée lorsque l'événement est déclenché.
3. Le déclenchement de l'événement dans la phase de capture nécessite une valeur booléenne. La valeur par défaut est false

. pour lier le même événement à un élément en même temps. Définissez plusieurs fonctions de réponse, de sorte que lorsque l'événement est déclenché, les fonctions de réponse soient exécutées dans l'ordre dans lequel les fonctions sont liées !

window.onload = fonction(){
    var bt = document.getElementById('bt1');
    bt.addEventListener('clic',function(){
        alert('La fonction correspondante au premier clic est déclenchée !')
    },FAUX);
    bt.addEventListener('clic',function(){
        alert('La fonction correspondante du deuxième clic est déclenchée !')
    },FAUX);
    bt.addEventListener('clic',function(){
        alert('La fonction correspondante du troisième clic est déclenchée !')
    }, false);}

Diffusion d'événements

• Netscape et Microsoft ont des interprétations différentes de la diffusion d'événements :
  Microsoft estime que les événements doivent être propagés de l'intérieur vers l'extérieur , c'est-à-dire que lorsqu'un événement est déclenché, l'événement sur l'élément actuel doit être déclenché en premier, puis propagé aux éléments ancêtres de l'élément actuel, ce qui signifie que l'événement doit être exécuté au stade de bouillonnement .
  Netscape pense que les événements doivent être propagés de l'extérieur vers l'intérieur , c'est-à-dire que lorsque l'événement en cours est déclenché, l'événement de l'élément ancêtre le plus externe de l'élément actuel doit être déclenché en premier, puis propagé vers l'intérieur vers les éléments descendants.
• Le W3C combine les solutions des deux sociétés et divise la propagation des événements en trois étapes :

1. l'étape de capture. Dans l'étape de capture, les événements sont capturés depuis l'élément ancêtre le plus externe jusqu'à l'élément cible, mais par défaut l'événement ne sera pas déclenché à ce moment-là. .
2. L'événement de phase cible capture l'élément cible, et la capture se termine et commence à déclencher des événements sur l'élément cible.
3. L'événement de phase de bouillonnement est transmis de l'élément cible à ses éléments ancêtres, déclenchant à leur tour des événements sur les éléments ancêtres.

La fonction de réponse est exécutée pendant la phase de bullage. Le troisième paramètre par défaut est false

window.onload = function(){
     var box1 = document.getElementById('box1');
     var box2 = document.getElementById('box2');
     var box3 = document.getElementById('box3');
     box1.addEventListener('clic',function(){
         alerte('box1');
     },FAUX);
     box2.addEventListener('clic',function(){
         alerte('box2');
     },FAUX);
     box3.addEventListener('clic',function(){
         alerte('box3');
     },FAUX);
 }

Si vous souhaitez déclencher l'événement pendant la phase de capture, vous pouvez définir le troisième paramètre de addEventListener() sur true !

window.onload = fonction(){
     var box1 = document.getElementById('box1');
     var box2 = document.getElementById('box2');
     var box3 = document.getElementById('box3');
     box1.addEventListener('clic',function(){
         alerte('box1');
     },vrai);
     box2.addEventListener('clic',function(){
         alerte('box2');
     },vrai);
     box3.addEventListener('clic',function(){
         alerte('box3');
     },vrai);
 }