Qu'est-ce que la délégation d'événements js ? Quels sont les avantages de l'utilisation de la délégation d'événements js ?-js tutoriel-php.cn

Qu'est-ce que la délégation d'événements js ? Quels sont les avantages de l'utilisation de la délégation d'événements js ?

不言

Libérer： 2018-08-29 17:37:25

original

6046 Les gens l'ont consulté

Qu'est-ce que la délégation d'événement js ? Quels sont les avantages de l’utilisation de la délégation d’événements ? Je pense que de nombreux amis peuvent avoir de telles questions, c'est pourquoi l'article suivant vous expliquera le concept de délégation d'événements js et les avantages de l'utilisation de la délégation d'événements js.

1. Qu'est-ce que la délégation d'événement js ?

Utiliser le bouillonnement d'événements pour gérer la liaison d'événements d'éléments dynamiques. Le terme professionnel est appelé délégation d'événements. Pour faire simple, il s'agit de lier des événements à l'élément parent pour surveiller les événements de bouillonnement des éléments enfants. . Et pour savoir de quel sous-élément il s'agit, une méthode plus populaire consiste à laisser d'autres personnes le faire. Cet événement a été initialement ajouté à certains éléments, mais vous l'avez ajouté à quelqu'un d'autre pour terminer l'événement. (Quels sont les événements ? Veuillez consulter : Manuel de référence en chinois JavaScript)

Par exemple, l'exemple suivant : Native js implémente la délégation d'événements

<!DOCTYPE html>
<html>
<head>
<title>事件委托测试</title>
</head>
<body>
<style type="text/css">
*{margin: 0;padding: 0;}
a{text-decoration: none;}
ul,li{list-style: none;}
div{display: block;width: 500px;padding: 200px 0 0 200px;}
div ul li{display: block;width: 100%;text-align: center;height: 35px;line-height: 35px;}
div ul li:nth-child(2n){background: #f00;}
</style>
<div>
    <ul>
        <li><a>测试1</a></li>
        <li><a>测试2</a></li>
        <li><a>测试3</a></li>
        <li><a>测试4</a></li>
        <li><a>测试5</a></li>
        <li><a>测试6</a></li>
        <li><a>测试7</a></li>
        <li><a>测试8</a></li>
    </ul>
</div>
<script type="text/javascript">
document.getElementsByTagName("ul")[0].addEventListener(&#39;click&#39;,function(e){
    alert("点击的内容是："+e.target.innerHTML);
});
</script>
</body>
</html>

Copier après la connexion

Remarque : Il existe trois étapes pour implémenter la délégation d'événements dans js :

Étape 1 : lier les événements à l'élément parent
Ajouter des événements de liaison à l'élément ul, et cliquez sur addEventListener Ajouter une liaison à l'événement, cliquez sur

Étape 2 : Écoutez l'événement bouillonnant du sous-élément
La valeur par défaut ici est de cliquer sur le sous-élément. li bouillonnera vers le haut

Étape 3 : Trouver de quel élément enfant provient l'événement

Le paramètre e de la fonction de rappel anonyme est utilisé pour recevoir l'objet événement, et la cible de l'événement déclenché est obtenue via target

2 Avantages de la délégation d'événement js :

Avantages de la délégation d'événement 1 : Délégation d'événement. La technologie peut éviter d'ajouter des écouteurs d'événements à chaque élément de mot et réduire le nombre de nœuds des opérations DOM, réduisant ainsi le redessinage et la réorganisation du navigateur et améliorant les performances du code.

Nous pouvons regarder un exemple : nous devons ajouter li dynamiquement. Cliquez sur le bouton pour ajouter dynamiquement li

<input type="button" id="btn" /><ul id="ul">
  <li>aaaaaaaa</li>
  <li>bbbbbbbb</li>
  <li>cccccccc</li></ul>

Copier après la connexion

Sans délégation d'événement, nous ferons ceci :

window.onload = function(){
  var oUl = document.getElementById("ul");
  var aLi = oUl.getElementsByTagName("li");
  var oBtn = document.getElementById("btn");
  var iNow = 4;
  for(var i=0; i<aLi.length; i++){
    aLi[i].onmouseover = function(){
      this.style.background = "red";
    }
    aLi[i].onmouseout = function(){
      this.style.background = "";
    }
  }

  oBtn.onclick = function(){
    iNow ++;
    var oLi = document.createElement("li");
    oLi.innerHTML = 1111 *iNow;
    oUl.appendChild(oLi);
  }

  
}

Copier après la connexion

De cette façon, nous pouvons voir qu'il n'y a pas d'événement de déplacement de souris pour changer le nouveau ajouté li en cliquant sur le bouton leur couleur d'arrière-plan.

Parce que la boucle for a déjà été exécutée lorsque vous cliquez sur Ajouter.

Ensuite, nous utilisons la délégation d'événements pour le faire. Autrement dit, le code HTML reste inchangé

window.onload = function(){
  var oUl = document.getElementById("ul");
  var aLi = oUl.getElementsByTagName("li");
  var oBtn = document.getElementById("btn");
  var iNow = 4;

  oUl.onmouseover = function(ev){
    var ev = ev || window.event;
    var target = ev.target || ev.srcElement;
    //alert(target.innerHTML);
    if(target.nodeName.toLowerCase() == "li"){
    target.style.background = "red";
    }
  }
  oUl.onmouseout = function(ev){
    var ev = ev || window.event;
    var target = ev.target || ev.srcElement;
    //alert(target.innerHTML);
    if(target.nodeName.toLowerCase() == "li"){
    target.style.background = "";
    }
  }
  oBtn.onclick = function(){
    iNow ++;
    var oLi = document.createElement("li");
    oLi.innerHTML = 1111 *iNow;
    oUl.appendChild(oLi);
  }
}

Copier après la connexion

Avantage 2 de la délégation d'événement : Grâce à la délégation d'événement, seul l'élément parent interagit avec le DOM et les autres opérations sont effectuées dans la mémoire virtuelle JS. . Cela améliore considérablement les performances.

Recommandations associées :

Délégation d'événements en js

Délégation d'événements javascript et liaison d'événements jQuery activée, désactivée et une

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!