Maison > Article > interface Web > 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 ?
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 ?
- 不言original
- 2018-08-29 17:37:255903parcourir
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('click',function(e){
alert("点击的内容是："+e.target.innerHTML);
});
</script>
</body>
</html>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>
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);
}
}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);
}
}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 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!
Articles Liés
Voir plus- Explication détaillée des exemples de délégation d'événements JS
- Résumé des exemples de délégation d'événements js
- Explication détaillée de l'utilisation de la délégation d'événements JS
- Comment utiliser la délégation d'événements JS dans votre projet
- Qu’est-ce que la délégation d’événements js ? Introduction à la délégation d'événements JavaScript