Conseils pratiques et études de cas pour éviter que les incidents ne se multiplient

Conseils pratiques et analyse de cas pour éviter le bouillonnement d'événement

Le bouillonnement d'événement signifie que dans l'arborescence DOM, lorsqu'un élément déclenche un événement, l'événement remonte jusqu'à l'élément parent dans l'arborescence DOM jusqu'au nœud racine. Ce mécanisme de bouillonnement peut parfois entraîner des problèmes et des erreurs inattendus. Afin d’éviter que ce problème ne se produise, nous devons apprendre à utiliser certaines techniques pratiques pour empêcher que les événements ne se déclenchent. Cet article présentera certaines techniques couramment utilisées pour empêcher la propagation d'événements, les analysera avec des cas et fournira des exemples de code spécifiques.

1. Utilisez la méthode stopPropagation de l'objet événement

En JavaScript, l'objet événement (event) fournit une méthode stopPropagation, qui peut être utilisée pour empêcher l'événement de continuer à bouillonner. L'utilisation de cette méthode est très simple, il suffit d'appeler event.stopPropagation() dans la fonction de traitement des événements.

Par exemple, il y a un bouton et un élément parent d'un événement click dans une page. Lorsque le bouton est cliqué, empêchez l'événement click de remonter jusqu'à l'élément parent :

<div id="parent">
  <button id="btn">点击按钮</button>
</div>

<script>
  const parent = document.getElementById('parent');
  const btn = document.getElementById('btn');

  btn.addEventListener('click', function(event) {
    event.stopPropagation();
    console.log('点击了按钮');
  });

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

Dans le code ci-dessus, après le bouton. est cliqué, la sortie dans la console est Seulement « cliqué sur le bouton » mais « cliqué sur l'élément parent » n'a pas été déclenché, indiquant que la propagation de l'événement a été empêchée avec succès en appelant la méthode stopPropagation.

2. Utilisez l'attribut CancelBubble de l'objet événement

En plus d'utiliser la méthode stopPropagation, l'objet événement fournit également un attribut CancelBubble, qui est une valeur booléenne. Vous pouvez empêcher les événements de se propager en définissant la propriété CancelBubble sur true.

Par exemple, dans une page, il y a un lien et un élément parent d'événement de clic Lorsque vous cliquez sur le lien, empêchez l'événement de clic de remonter jusqu'à l'élément parent :

<div id="parent">
  <a href="#" id="link">点击链接</a>
</div>

<script>
  const parent = document.getElementById('parent');
  const link = document.getElementById('link');

  link.addEventListener('click', function(event) {
    event.cancelBubble = true;
    console.log('点击了链接');
  });

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

Dans le code ci-dessus, après avoir cliqué sur le lien. , la sortie dans la console est Seulement "cliqué sur le lien" mais "cliqué sur l'élément parent" n'a pas été déclenché, indiquant que la propagation de l'événement a été empêchée avec succès en définissant l'attribut CancelBubble sur true.

3. Analyse de cas

Nous utilisons maintenant un cas spécifique pour analyser plus en détail les scénarios et les techniques permettant d'empêcher la propagation d'événements.

Supposons qu'il y ait plusieurs éléments div imbriqués dans une page et que chaque élément div ait son propre événement de clic. Maintenant, ce que nous voulons réaliser, c'est que lorsque l'on clique sur le div le plus interne, seul l'événement click du div est déclenché, mais pas l'événement click de son élément parent.

<div id="outer" style="background: yellow;">
  <div id="middle" style="background: blue;">
    <div id="inner" style="background: red;"></div>
  </div>
</div>

<script>
  const outer = document.getElementById('outer');
  const middle = document.getElementById('middle');
  const inner = document.getElementById('inner');

  outer.addEventListener('click', function() {
    console.log('点击了外层div');
  });

  middle.addEventListener('click', function() {
    console.log('点击了中间div');
  });

  inner.addEventListener('click', function(event) {
    event.stopPropagation();
    console.log('点击了最内层div');
  });
</script>

Dans le code ci-dessus, lorsque nous cliquons sur le div le plus interne, la seule sortie dans la console est "cliqué sur le div le plus interne", mais "cliqué sur le div du milieu" et "cliqué sur le div externe" ne l'est pas. déclenché, indiquant que la propagation de l'événement a été empêchée avec succès en appelant la méthode stopPropagation, répondant ainsi à nos besoins.

Pour résumer, en utilisant la méthode stopPropagation ou la propriété CancelBubble de l'objet événement, vous pouvez facilement empêcher l'événement de bouillonner. Dans le développement réel, il est important de choisir des techniques appropriées pour éviter la propagation d'événements en fonction de besoins spécifiques. Espérons que cet article vous aidera à mieux appliquer les techniques permettant d’éviter les bulles d’événements.

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!