Maison > Article > interface Web > Comment utiliser la délégation d'événements JS dans votre projet

Comment utiliser la délégation d'événements JS dans votre projet

php中世界最好的语言original: 2018-06-09 11:53:091471parcourir

Cette fois, je vais vous montrer comment utiliser la délégation d'événements JS dans les projets, et quelles sont les précautions à prendre pour utiliser la délégation d'événements JS dans les projets. Ce qui suit est un cas pratique, jetons un coup d'œil.

Dans la vie quotidienne, nous pouvons entendre le concept de délégation d'événement. Certains étudiants ont peut-être déjà une bonne compréhension de la délégation d'événement, et certains étudiants n'ont peut-être entendu parler que de délégation d'événement et peuvent l'utiliser simplement, mais pour moi. Je ne connais pas grand chose au principe de la délégation d'événements. Par conséquent, cet article de blog expliquera le principe de la délégation d'événements dans Native Js, pourquoi il existe une délégation d'événements, pourquoi la délégation d'événements peut être utilisée de cette manière et d'autres problèmes.

1. Flux d'événements en js

Avant d'analyser le délégué d'événement, passons d'abord en revue le flux d'événements en js, c'est-à-dire le bouillonnement et la capture.

①. Bubbling : lorsqu'un nœud de niveau inférieur déclenche un événement, l'événement déclenchera étape par étape des événements similaires sur le nœud de niveau supérieur.

②. Capture : Semblable au bouillonnement, sauf que l'ordre des événements est inversé. Autrement dit, il est transmis du nœud de niveau supérieur au nœud de niveau inférieur

2 Principe de la délégation d'événement

La délégation d'événement est générée sur la base du js. flux d'événements et la délégation d'événements utilise le bouillonnement d'événements, ajoutez l'événement à l'élément parent ou à l'élément ancêtre pour déclencher l'événement.

<body>
  <p id="myp">
    <input type="button" value="按钮1" id="btn1">
    <input type="button" value="按钮2" id="btn2">
    <input type="button" value="按钮3" id="btn3">
  </p>
</body>
<script type="text/javascript">
  document.getElementById("myp").onclick=function(e){
    e=window.event||e;
    var btnId=e.target.id;
    switch(btnId){
      case "btn1":
        console.log("按钮1");
      break;
      case "btn2":
        console.log("按钮2");
      break;
      case "btn3":
        console.log("按钮3");
      break;
    }
  }
</script>

Le code ci-dessus est un cas typique de délégation d'événement. Le principe utilisé est le bouillonnement d'événement, le chargement de l'événement sur l'élément parent et la distinction des boutons via les paramètres de l'événement

3Résumé

En déléguant le code d'événement ci-dessus De. De l'observation, nous pouvons facilement tirer les avantages de la délégation d'événements :

①. Réduisez le nombre d'événements de liaison de page, car plus il y a de liaisons d'événements de page, plus les performances d'exécution de la page sont mauvaises, donc la délégation d'événements peut améliorer la page. Performances

②. La délégation d'événements peut gérer de manière flexible les changements dynamiques dans les nœuds enfants. Peu importe que les nœuds enfants augmentent ou diminuent, les événements n'ont pas besoin d'être rebondis

Je pense que vous l'avez maîtrisé. après avoir lu le cas dans cet article, pour des méthodes plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Utilisation de la fonction d'analyse d'actualisation du webpack

Comment utiliser le plug-in d'installation dans des projets réels

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser la copie profonde et superficielle JS dans des projets pratiquesArticle suivant：Comment utiliser la copie profonde et superficielle JS dans des projets pratiques

Articles Liés

Voir plus