Quelles sont les différences dans les mécanismes de réponse entre les événements bouillonnants et non bouillonnants ?

Quelle est la différence entre les événements avec bulles et les événements sans bulles ? Des exemples de code spécifiques sont requis

Les événements jouent un rôle important dans la programmation. Ils peuvent être des comportements d'interaction de l'utilisateur (tels que des clics, des glissements, etc.) ou. Il peut s'agir du comportement interne du navigateur ou de la page Web (comme la fin du chargement, le changement de la taille de la fenêtre, etc.). Selon différentes méthodes de propagation d’événements, les événements peuvent être divisés en événements bouillonnants et événements sans bulle.

Événements bouillonnants
Les événements bouillonnants font référence à des événements qui partent de la cible de l'événement et se propagent étape par étape vers les éléments supérieurs jusqu'à ce qu'ils atteignent le nœud racine du document. Pendant le processus de propagation, le gestionnaire d'événements de l'élément parent sera déclenché en premier, puis le gestionnaire d'événements de l'élément grand-parent, et ainsi de suite, jusqu'au gestionnaire d'événements du nœud racine.

Ce qui suit est un exemple de code pour un événement bouillonnant :

Code HTML :

<div id="outer">
  <div id="inner">
    <button id="button">点击</button>
  </div>
</div>

Code JavaScript :

var outer = document.getElementById('outer');
var inner = document.getElementById('inner');
var button = document.getElementById('button');

button.addEventListener('click', function(event) {
  console.log('按钮被点击');
});

inner.addEventListener('click', function(event) {
  console.log('内部div被点击');
});

outer.addEventListener('click', function(event) {
  console.log('外部div被点击');
});

Lorsque vous cliquez sur le bouton, la console affichera ce qui suit :

按钮被点击
内部div被点击
外部div被点击

Comme le montre la sortie , bouillonnant L'événement déclenche d'abord le gestionnaire d'événements de clic du bouton, puis le gestionnaire d'événements de clic du div interne et enfin le gestionnaire d'événements de clic du div externe.

Événements sans bulle
Les événements sans bulle signifient que l'événement ne sera déclenché que sur la cible de l'événement et ne se propagera pas vers le haut. En d'autres termes, seul le gestionnaire d'événements de l'élément cliqué sera exécuté.

Ce qui suit est un exemple de code pour un événement sans bulle :

Code HTML :

<div id="outer">
  <div id="inner">
    <button id="button">点击</button>
  </div>
</div>

Code JavaScript :

var outer = document.getElementById('outer');
var inner = document.getElementById('inner');
var button = document.getElementById('button');

button.addEventListener('click', function(event) {
  console.log('按钮被点击');
});

inner.addEventListener('click', function(event) {
  console.log('内部div被点击');
});

outer.addEventListener('click', function(event) {
  console.log('外部div被点击');
}, true);

Lorsque vous cliquez sur le bouton, la console n'affichera que ce qui suit :

按钮被点击

Comme on peut le voir à partir de la sortie, les événements sans bulles déclenchent uniquement le gestionnaire d'événements de clic du bouton.

Pour résumer, la principale différence entre les événements bouillonnants et les événements non bouillonnants réside dans la manière dont l'événement se propage. Les événements bouillonnants se propageront de la cible de l'événement aux éléments supérieurs, tandis que les événements non bouillonnants ne seront déclenchés que sur la cible de l'événement. Comprendre la différence entre ces deux événements est très important pour gérer la propagation des événements et optimiser l'effet interactif de la page.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!