Apprenez les principes du bouillonnement d'événements de clic et comment l'utiliser dans le développement Web.

Comprendre le principe du bouillonnement d'événements de clic et son application dans le développement Web

Dans le développement Web, l'interaction avec les utilisateurs est souvent impliquée. Parmi eux, les événements constituent l’un des mécanismes importants permettant d’obtenir cet effet interactif. Parmi ces événements, l’événement de clic est le plus utilisé. Apprendre à comprendre le principe du bouillonnement d'événements de clic et son application dans le développement Web permet de mieux comprendre le mécanisme des événements et d'obtenir une expérience d'interaction utilisateur plus riche.

1. Le principe du bouillonnement d'événement de clic

Lorsqu'un événement se produit sur un élément, si l'élément a un élément parent et que l'élément parent est également lié au même type d'événement, alors l'événement sera déclenché à partir du élément enfant un par un. Les niveaux remontent jusqu'à l'élément parent le plus haut. Ce processus est appelé bouillonnement d’événements.

Par exemple, il existe une page Web avec la structure HTML suivante :

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

Supposons qu'un écouteur d'événement de clic soit lié à ce bouton :

document.getElementById("btn").addEventListener("click", function(){
  console.log("按钮被点击了");
});

Lorsque l'on clique sur le bouton, la console affichera "Le bouton a été cliqué". En effet, l'événement de clic du bouton a déclenché l'écouteur.

Si nous lions un écouteur d'événement du même type à l'élément parent div :

document.getElementById("box").addEventListener("click", function(){
  console.log("div被点击了");
});

De cette façon, lorsque l'on clique sur le bouton, non seulement "le bouton est cliqué" est affiché, mais "div est cliqué" est également affiché . En effet, une fois l'événement click déclenché sur le bouton, il continuera à remonter jusqu'à l'élément parent div.

2. Application du bouillonnement d'événement de clic

1. Amélioration de la maintenabilité et de l'évolutivité du code

En cliquant sur le bouillonnement d'événement, nous pouvons lier un écouteur d'événement à l'élément parent sans lier les auditeurs d'événement à chaque élément enfant séparément. Cela peut réduire considérablement la quantité de code et faciliter la maintenance et l’expansion.

Par exemple, supposons qu'il existe une liste ul contenant plusieurs éléments li. Pour y parvenir, lorsqu'un élément li est cliqué, sa couleur d'arrière-plan est modifiée. Nous pouvons écrire le code comme ceci :

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

var lis = document.getElementById("list").getElementsByTagName("li");
for(var i=0; i<lis.length; i++){
  lis[i].addEventListener("click", function(){
    this.style.backgroundColor = "red";
  });
}

Cependant, si nous devons ajouter de nouveaux éléments li plus tard, nous devons le conserver à nouveau dans le code JavaScript. Et si nous utilisons le bouillonnement d'événements, il nous suffit de lier un écouteur d'événement à l'élément ul :

document.getElementById("list").addEventListener("click", function(e){
  if(e.target.tagName.toLowerCase() === "li"){
    e.target.style.backgroundColor = "red";
  }
});

Peu importe le nombre d'éléments li, nous n'avons besoin que d'un seul écouteur, et nous pouvons utiliser le mécanisme de bouillonnement d'événements pour l'activer. l'élément parent Capturez l'événement, puis déterminez sur quel élément enfant vous avez cliqué en fonction de la source de l'événement.

2. Mettre en œuvre la délégation d'événements

En utilisant le bouillonnement d'événements, nous pouvons implémenter la fonction de délégation d'événements. La délégation d'événements fait référence au transfert des événements d'un élément à son élément parent ou à un élément de niveau supérieur pour traitement. Cela réduit le nombre d'écouteurs et facilite la liaison dynamique.

Par exemple, disons que nous avons un tableau et que lorsque la souris passe sur une cellule, la couleur d'arrière-plan de cette cellule change. Nous pouvons écrire le code comme ceci :

<table id="table">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
</table>

var tds = document.getElementById("table").getElementsByTagName("td");
for(var i=0; i<tds.length; i++){
  tds[i].addEventListener("mouseover", function(){
    this.style.backgroundColor = "yellow";
  });
  tds[i].addEventListener("mouseout", function(){
    this.style.backgroundColor = "white";
  });
}

Cependant, si nous devons ajouter de nouvelles cellules plus tard, nous devons le conserver à nouveau dans le code JavaScript. Et si nous utilisons le bouillonnement d'événements, il nous suffit de lier un écouteur d'événement à l'élément table :

document.getElementById("table").addEventListener("mouseover", function(e){
  if(e.target.tagName.toLowerCase() === "td"){
    e.target.style.backgroundColor = "yellow";
  }
});
document.getElementById("table").addEventListener("mouseout", function(e){
  if(e.target.tagName.toLowerCase() === "td"){
    e.target.style.backgroundColor = "white";
  }
});

En jugeant la source de l'événement, nous pouvons éviter de lier un écouteur à chaque cellule. Cela réduit le nombre d'écouteurs et facilite la liaison dynamique.

En bref, comprendre le principe du bouillonnement d'événements de clic et son application dans le développement Web peut améliorer la maintenabilité et l'évolutivité du code, tout en réalisant la fonction de délégation d'événements. Dans le même temps, la diffusion d’événements peut également mieux contrôler et gérer les interactions des utilisateurs. Dans le développement Web réel, une compréhension approfondie et une utilisation flexible du mécanisme de bouillonnement des événements de clic amélioreront considérablement l'efficacité du développement et l'expérience utilisateur.

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!