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

Cette fois, je vais vous apporter une explication détaillée de l'utilisation de la délégation d'événements JS. Quelles sont les précautions lors de l'utilisation de la délégation d'événements JS. Voici un cas pratique, jetons un coup d'oeil.

Délégation d'événement (également appelée Proxy d'événement En fait, ce problème est également simple Pour comprendre la délégation d'événement, nous devons d'abord comprendre le mécanisme de bouillonnement d'événements. . clair. Prenons un exemple de bouillonnement d'événement :

<ul>
    <li>点击</li>
</ul>
<script>
    var ul=document.getElementsByTagName('ul')[0];
    var li=document.getElementsByTagName('li')[0];
    ul.addEventListener('click', function(){
      alert('我是ul,我被点击了');
    }, false);
    li.addEventListener('click', function(){
      alert('我是li,我被点击了');
    }, false);
</script>

Dans ce code, lorsque l'on clique sur li, l'événement click de li est déclenché, mais à ce moment, l'événement click de ul est également déclenché. les événements bouillonnent. Après avoir compris cela, nous pouvons parler de délégation d'événements. Puisque les événements peuvent surgir de l'élément parent (ul) de l'élément enfant (li), nous pouvons alors ajouter un événement click à ul lui-même et combiner tous les événements li. à notre parent (ul). Peut-être que certains amis ici ne comprennent toujours pas l'utilisation de cette délégation d'événement. Donnons un exemple de délégation d'événement pour illustrer :

<ul>
    <li>点击1</li>
    <li>点击2</li>
    <li>点击3</li>
    <li>点击4</li>
    <li>点击5</li>
</ul>
<script>
    //使用事件委托的代码
    var ul=document.getElementsByTagName('ul')[0];
    ul.addEventListener('click', function(e){
      alert(e.target.innerHTML);
    }, false);
    //不使用事件委托，循环给li添加click事件
    var li=document.getElementsByTagName('li')
    for(var i=0;i<li.length;i++){
      li[i].onclick=function(){
        alert(this.innerHTML);
      }
    }
</script>

Notre code ci-dessus délègue l'événement à ul. , et ajoute uniquement des événements de clic à ul. Lors de l'exécution du li correspondant dans le navigateur, le innerHTML correspondant au li apparaîtra. Le paramètre e dans ce function(e){}; est en fait le clic actuel sur lequel nous cliquons. les informations sur l'événement qui nous sont envoyées par le système, e.target font en fait référence au li sur lequel nous cliquons actuellement. Ici, chaque fois que nous faisons apparaître le innerHTML de l'objet actuellement cliqué, il s'agit d'un simple événement commandé.

La délégation d'événements est d'une grande importance pour nous dans l'optimisation du code. Nous savons tous que les opérations DOM fréquentes nécessitent beaucoup de performances. Il y a maintenant 5 li dans ul. code ci-dessus Pour ce faire, vous devez utiliser une boucle for et écrire un événement click pour chaque li De cette façon, il y aura plus d'opérations dom. Et s'il y avait 10 li, 100 ou plus, sans parler de l'impact de. Opérations dom seules. Performances, trop de boucles for prendront beaucoup d'événements. Si vous utilisez la délégation d'événements, vous pouvez éviter la consommation de performances des boucles for et la consommation de performances de nombreuses opérations DOM.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Vue implémente le composant Echarts d'actualisation dynamique

Utilisez le sélecteur de sélection dans le bootstrap pour implémenter la liste déroulante

Utilisation de l'url, href, src en JS

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!