Explication détaillée des exemples de délégation d'événements JS

Cet article partage principalement avec vous l'explication détaillée des exemples de délégation d'événements JS. Voyons d'abord l'analyse de la délégation d'événements : également appelée proxy d'événement, elle utilise le principe du bullage pour ajouter des événements au parent afin de déclencher le. effet d'exécution.

Tout d'abord, vous devez avoir écrit un programme comme celui-ci. Il y a une liste Lorsque la souris se déplace dans chaque li, la couleur de fond devient rouge, nous avons donc écrit ce code :

(Le code que je donne est généralement le code clé, vous pouvez écrire le code HTML par vous-même.)

window.onload =  oUl = document.getElementById('ull' aLi = document.getElementsByTagName('li'); 
    ( i =0;i <p style="margin:10px auto;color:rgb(51,51,51);font-family:verdana, Arial, Helvetica, sans-serif;font-size:14px;background-color:rgb(255,255,255);">Bien sûr, il n'y a aucun problème si vous regardez le code comme ceci. Vous pouvez. ajoutez des événements à chaque li via une boucle, mais je veux y réfléchir si nous avons beaucoup de li, devons-nous ajouter de nombreux événements, cela consomme en fait beaucoup de performances ? On se demandera alors si on peut y parvenir en ajoutant simplement un événement. Bien sûr que c’est possible, sinon je n’en parlerais pas. </p><p style="margin:10px auto;color:rgb(51,51,51);font-family:verdana, Arial, Helvetica, sans-serif;font-size:14px;background-color:rgb(255,255,255);"> Il s'agit d'une délégation d'événements via le principe de bouillonnement. Nous pouvons ajouter des événements uniquement à l'oUL parent, de sorte que quel que soit le li déplacé, l'événement d'emménagement du parent sera déclenché (pour ceux qui ne le font pas. Je ne comprends pas le bouillonnement, vous pouvez vous référer à mon article sur le bouillonnement JS), mais il y a aussi un problème en ce moment, car mon exigence est de changer la couleur du li correspondant, pas la liste entière. Comment sait-il quel LI I. déplacé la souris vers ? À ce moment-là, un attribut dans l'objet événement universel est sur le point d'apparaître, qui est la source de l'événement (quel que soit l'élément auquel l'événement est lié, il fait référence à la cible qui déclenche réellement l'événement), qui peut obtenez le LI où se trouve actuellement votre souris, </p><p style="margin:10px auto;color:rgb(51,51,51);font-family:verdana, Arial, Helvetica, sans-serif;font-size:14px;background-color:rgb(255,255,255);">Cependant, cela présente des problèmes de compatibilité. IE est différent du standard La norme fait référence aux versions les plus récentes des navigateurs </p><p style="margin:10px auto;color:rgb(51,51,51);font-family:verdana, Arial, Helvetica, sans-serif;font-size:14px;background-color:rgb(255,255,255);">IE : window. event.srcElement<br>Standard : event. target</p><p style="margin:10px auto;color:rgb(51,51,51);font-family:verdana, Arial, Helvetica, sans-serif;font-size:14px;background-color:rgb(255,255,255);">Il doit donc être compatible, ce qui est également très simple. </p><p style="margin:10px auto;color:rgb(51,51,51);font-family:verdana, Arial, Helvetica, sans-serif;font-size:14px;background-color:rgb(255,255,255);">Regardez le code global ci-dessous : </p><pre style="margin-bottom:0px;padding-right:0px;padding-left:0px;white-space:pre-wrap;font-family:'Courier New';" class="brush:php;toolbar:false;">window.onload = function(){ 
    var oUl = document.getElementById('ull');     var aLi = document.getElementsByTagName('li');

  oUl.onmouseover = function(ev){ 
     var event = ev||window.event;  // 获取event对象     var target = ev.target || ev.srcElement; // 获取触发事件的目标对象    
     if(target.nodeName.toLowerCase() == 'li'){  //判断目标对象是不是li
         target.style.background = 'red';
     }

  }
代码中加了一个标签名的判断，主要原因是如果不加判断，当你鼠标移入到父级oUL上面的时候，整个列表就会变红，这不是我们想要的结果，所以要判断一下。

target.nodeName 弹出的名字是大写的，所以需要转换大小写再比较。

L'ensemble de l'exigence est complété de cette manière, et les performances sont grandement améliorées lorsqu'il y en a plusieurs listes.

En fait, la délégation d'événements a un deuxième avantage : les éléments nouvellement ajoutés auront également des événements précédents

Supposons que nous ayons une autre exigence, cliquez sur un bouton, vous pouvez en créer une autre li dans la liste. À l'heure actuelle, la méthode générale est que parce que le li nouvellement créé n'a pas d'événement, il n'a pas pour fonction d'entrer et de devenir rouge. Cependant, en utilisant la méthode de délégation d'événement, le nouveau li également. a cet événement. Le principe est également très simple à appliquer, car l'événement est ajouté au père. Si le père est là, l'événement est là. Vous pouvez le tester vous-même.

Recommandations associées :

Détails de ce que sont les événements dans js Bubbling et capture d'événements et délégation d'événements

Analyse comparative de la capture d'événements, du bouillonnement et de la délégation d'événements

Explication détaillée de la délégation d'événements Javascript

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!