Guide d'analyse des événements bouillonnants JS : matériel à lire absolument pour les débutants-js tutoriel-php.cn

Guide d'analyse des événements bouillonnants JS : matériel à lire absolument pour les débutants

王林

Libérer： 2024-01-13 10:21:06

original

1310 Les gens l'ont consulté

Guide danalyse des événements bouillonnants JS : matériel à lire absolument pour les débutants

À lire absolument pour les débutants : Introduction aux événements bouillonnants JS et analyse des scénarios d'application

Introduction :
Dans le développement Web, JavaScript (JS) est un langage de programmation très important. Après avoir maîtrisé la syntaxe et les opérations de base de JS, comprendre le mécanisme événementiel de JS est la clé pour améliorer davantage vos capacités. Parmi eux, les événements bouillonnants sont un concept important dans le mécanisme d'événements JS. Cet article présentera en détail les concepts, les principes et les scénarios d'application pratiques des événements bouillonnants JS, et fournira des exemples de code spécifiques pour aider les débutants à mieux les comprendre et les maîtriser.

1. Concept :
Un événement bouillonnant signifie que lorsqu'un élément déclenche un événement, l'événement sera déclenché dans l'élément parent en séquence jusqu'à ce qu'il déclenche l'élément ancêtre le plus externe. Ce processus est comme une bulle qui monte du bas, c’est pourquoi on l’appelle un événement bouillonnant.

2. Principe :
Le principe des événements bouillonnants est basé sur la structure arborescente du DOM, c'est-à-dire le modèle objet du document. Dans une page Web, tous les éléments (y compris les balises HTML et les éléments créés par JS) peuvent être considérés comme des nœuds d'une arborescence DOM. Lorsqu'un événement se produit sur un élément, le moteur JS déclenchera le même type d'événement en séquence selon la structure de l'arborescence DOM, c'est-à-dire déclenchera le même événement sur l'élément parent jusqu'à l'élément ancêtre le plus externe.

3. Exemple de code 1 : Utilisation de base des événements bouillonnants
Ce qui suit est un simple extrait de code HTML qui démontre l'utilisation de base des événements bouillonnants :

<!DOCTYPE html>
<html>
<head>
  <title>冒泡事件示例</title>
</head>
<body>
  <div id="outer">
    <div id="inner">
      <button id="btn">点击触发冒泡事件</button>
    </div>
  </div>

  <script>
    // 选择DOM元素
    const outer = document.querySelector('#outer');
    const inner = document.querySelector('#inner');
    const btn = document.querySelector('#btn');

    // 添加冒泡事件监听
    outer.addEventListener('click', function() {
      console.log('父级元素outer被点击');
    });

    inner.addEventListener('click', function() {
      console.log('子级元素inner被点击');
    });

    btn.addEventListener('click', function() {
      console.log('按钮被点击');
    });
  </script>
</body>
</html>

Copier après la connexion

Dans le code ci-dessus, nous donnons l'élément parent externe, l'élément enfant interne et L'élément bouton btn ajoute un écouteur d'événement de clic. Lorsque nous cliquons sur le bouton, les informations suivantes seront affichées sur la console :

按钮被点击
子级元素inner被点击
父级元素outer被点击

Copier après la connexion

En effet, l'événement de clic de l'élément bouton bouillonne vers l'élément enfant interne et l'élément parent externe, et déclenche la fonction de rappel d'événement correspondante.

4. Exemple de code 2 : Scénarios d'application d'événements bouillonnants
Les scénarios d'application d'événements bouillonnants sont très larges. Ci-dessous, nous prenons la fonction de suppression d'articles du panier comme exemple pour démontrer l'application pratique des événements bouillonnants.

<!DOCTYPE html>
<html>
<head>
  <title>冒泡事件应用场景示例</title>
  <style>
    .item {
      margin-bottom: 10px;
      padding: 5px;
      border: 1px solid #ccc;
    }
    .delete-btn {
      float: right;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="cart">
    <div class="item">
      商品1
      <span class="delete-btn">删除</span>
    </div>
    <div class="item">
      商品2
      <span class="delete-btn">删除</span>
    </div>
    <div class="item">
      商品3
      <span class="delete-btn">删除</span>
    </div>
  </div>

  <script>
    // 选择DOM元素
    const cart = document.querySelector('#cart');

    // 添加冒泡事件监听
    cart.addEventListener('click', function(event) {
      const target = event.target;
      if (target.classList.contains('delete-btn')) {
        const item = target.parentNode;
        item.remove();
        console.log('删除成功');
      }
    });
  </script>
</body>
</html>

Copier après la connexion

Dans le code ci-dessus, nous avons ajouté un écouteur d'événement de clic pour le bouton de suppression de chaque élément du produit. Lorsque vous cliquez sur le bouton Supprimer, le message « Supprimer avec succès » s'affiche dans la console et l'élément de produit correspondant est supprimé du panier. En effet, lorsque vous cliquez sur le bouton de suppression, l'événement bouillonnant déclenchera la fonction d'écoute de l'événement de clic sur le panier de l'élément parent. En déterminant si l'élément cible cliqué est un bouton de suppression, la fonction de suppression spécifique peut être implémentée.

Résumé :
Les événements bulles sont un concept important dans le mécanisme d'événements JS et une partie qui ne peut être ignorée dans le développement Web. Grâce à l'introduction détaillée de cet article sur les concepts, les principes et les scénarios d'application pratiques des événements bouillonnants, je pense que les débutants ont déjà une compréhension et une maîtrise préliminaires des événements bouillonnants. J'espère que cet article pourra aider les débutants à mieux comprendre et appliquer les événements bouillonnants et à améliorer leurs compétences en programmation JS.

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!