Limites des événements de bullage : Quand le bullage ne peut-il pas être mis en œuvre ?

Limitations des événements de bouillonnement : Dans quelles circonstances le bouillonnement ne peut-il pas être obtenu ?

Dans le développement front-end, nous utilisons souvent le bouillonnement d'événements pour gérer les événements des éléments DOM. Cependant, le bouillonnement n’est parfois pas une panacée et il existe des cas où le bouillonnement ne peut pas répondre à nos besoins. Cet article abordera certaines situations dans lesquelles le bullage n'est pas possible et fournira des exemples de code spécifiques.

1. Empêcher le bouillonnement
Normalement, nous utilisons la méthode Event.stopPropagation() pour empêcher l'événement de bouillonner. Cependant, parfois, empêcher le bouillonnement ne permet pas d’obtenir l’effet souhaité. Event.stopPropagation()方法来阻止事件的冒泡。然而，有些时候阻止冒泡并不能达到我们想要的效果。

例如，假设我们有一个父元素和一个子元素，当点击子元素时，我们希望子元素的事件处理函数执行完后再执行父元素的事件处理函数。我们可能会尝试在子元素的事件处理函数中使用event.stopPropagation()

Par exemple, supposons que nous ayons un élément parent et un élément enfant. Lorsque l'on clique sur l'élément enfant, nous voulons que la fonction de gestionnaire d'événements de l'élément enfant soit exécutée avant que la fonction de gestionnaire d'événements de l'élément parent ne soit exécutée. Nous pouvons essayer d'utiliser event.stopPropagation() dans le gestionnaire d'événements de l'élément enfant pour éviter le bouillonnement :

<div id="parent">
  <div id="child"></div>
</div>

<script>
document.getElementById('child').addEventListener('click', function(event) {
  event.stopPropagation();
  console.log('子元素点击事件');
});

document.getElementById('parent').addEventListener('click', function() {
  console.log('父元素点击事件');
});
</script>

Cependant, le code ci-dessus ne peut pas répondre à nos besoins. Cliquer sur l'élément enfant ne fera qu'exécuter. la fonction de gestionnaire d'événements de clic de l'élément enfant, mais la fonction de gestionnaire d'événements de clic de l'élément parent ne sera pas exécutée. En effet, empêcher le bouillonnement empêchera uniquement la transmission de l'événement à l'élément parent, mais cela n'entraînera pas l'exécution du gestionnaire d'événements de l'élément parent après l'exécution du gestionnaire d'événements de l'élément enfant.

2. Délégation d'événement

La délégation d'événement utilise le principe du bouillonnement d'événement pour lier l'événement à l'élément parent et déclencher la fonction de traitement correspondante en jugeant la source de l'événement. Cependant, il existe parfois des limites lors de l’utilisation de la délégation d’événements.

Par exemple, supposons que nous ayons un élément ul qui contient plusieurs éléments li. Nous espérons que lorsque vous cliquez sur un élément li, le contenu textuel de l'élément sera affiché. Nous pouvons essayer d'utiliser la délégation d'événement pour obtenir :

<ul id="list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

<script>
document.getElementById('list').addEventListener('click', function(event) {
  if (event.target.tagName.toLowerCase() === 'li') {
    console.log(event.target.textContent);
  }
});
</script>

Le code ci-dessus peut répondre à nos besoins. Après avoir cliqué sur n'importe quel élément li, le contenu textuel de l'élément sera affiché. Mais si nous ajoutons une balise a à l'élément li, et que le bouillonnement est empêché lorsque l'on clique sur la balise a, la délégation d'événement ne fonctionnera pas correctement :

<ul id="list">
  <li>1 <a href="#" onclick="event.stopPropagation();">阻止冒泡</a></li>
  <li>2</li>
  <li>3</li>
</ul>

<script>
document.getElementById('list').addEventListener('click', function(event) {
  if (event.target.tagName.toLowerCase() === 'li') {
    console.log(event.target.textContent);
  }
});
</script>

Dans le code ci-dessus, lorsque l'on clique sur le lien "Empêcher le bouillonnement", la délégation d'événement échouera et rien ne sera généré. En effet, empêcher le bouillonnement empêche les événements de se propager vers l'élément ul, de sorte que le délégué d'événement ne peut pas détecter la source d'événement correspondante.

3. Traitement des événements asynchrones

Dans certains cas, nous pouvons avoir besoin de traiter des événements de manière asynchrone, par exemple en effectuant des requêtes réseau ou en effectuant d'autres opérations fastidieuses. Cependant, le mécanisme de bullage ne peut pas répondre directement aux besoins du traitement événementiel asynchrone.

Par exemple, supposons que nous ayons un élément bouton. Lorsque l'on clique sur le bouton, nous devons envoyer une requête asynchrone pour obtenir les données, puis mettre à jour la page en fonction des données. Nous pouvons essayer d'effectuer des opérations asynchrones dans le gestionnaire d'événements de clic du bouton :

<button id="btn">点击</button>

<script>
document.getElementById('btn').addEventListener('click', function() {
  setTimeout(function() {
    console.log('异步操作完成');
  }, 1000);
});
</script>

Le code ci-dessus affichera "Opération asynchrone terminée" une seconde après avoir cliqué sur le bouton. Cependant, si nous avons un gestionnaire d'événements de clic sur l'élément parent du bouton et que nous souhaitons exécuter le gestionnaire d'événements une fois l'opération asynchrone terminée, le mécanisme de bouillonnement ne peut pas répondre à cette exigence.

Pour résumer, bien que le bullage soit un mécanisme très courant et puissant dans le développement front-end, il présente également certaines limites dans certains cas. Dans ces cas-là, nous devons trouver d’autres solutions pour répondre à nos besoins. 🎜

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!