Analyse approfondie des événements Javascript proxy_Connaissances de base

Depuis longtemps, j'ai toujours pensé qu'il n'y a pas de différence entre la survenance d'un événement et l'arrivée de l'événement.

Récemment, j'ai jeté un autre coup d'œil et j'ai constaté que la différence n'était vraiment pas si grande ! Voyons comment vous le comprenez.

Pour comprendre ce qu'est un agent événementiel, vous devez d'abord comprendre ce qu'est un agent.

D'un point de vue commercial, être agent signifie : j'ai les marchandises, vous n'avez pas les marchandises, mais je n'ai ni le temps ni l'énergie de les vendre toutes, et vous avez tellement de temps libre que vous avoir seulement le temps. Alors, je vous confie votre aide pour l'acheter, et je vous donnerai ensuite une commission. Dans ce processus, vous possédez réellement la marchandise.

OK, comment comprenez-vous littéralement le sens du terme agent événementiel ? Nous en reparlerons plus tard.

1 Regardons d'abord un exemple réel de liaison novice avec des événements onclick

Si je suivais mon comportement précédent, comment ajouterais-je onlick à chaque balise li ? C'est absurde, si c'était moi, ce serait certainement simple et grossier.
Parcourez chaque li, puis liez-les tous en un clic.

Mon code devrait donc ressembler à ceci :

<ul id="thl">
  <li>001</li>
  <li>002</li>
  <li>003</li>
</ul>

<script>
  var thl= document.getElementById('thl');
  var aLi = thl.getElementsByTagName('li');
  for (var i = 0; i < aLi.length; i++) {
  　　aLi[i].onclick = fn;
  }
  
  function fn (){
   console.log("maomaoliang");
  }
</script>

On dirait que tout va bien. Bien que certains articles disent que cela consomme des performances, mon ordinateur est bon et je ne me soucie pas de vos performances, donc je ne peux pas le prendre trop au sérieux.

2 Soudain, un jour, j'ai découvert que le nouveau li ajouté via js n'était pas lié à onlcik

var node=document.createElement("li");
var textnode=document.createTextNode("maomaoliang");
node.appendChild(textnode);
document.getElementById("ul1").appendChild(node);

Ensuite, lorsque je clique sur maomaoliang, cela ne lie pas mon onlick. Pourquoi est-ce ?
Oh, il s'avère que mon li d'origine et le li généré plus tard ne se sont pas produits en même temps. Avant la création du nouvel élément li, des événements ont été ajoutés au li existant. D'accord, c'est tellement ennuyeux.

Trois Comment le casser ?

Ensuite, j'ai lu quelques articles et découvert qu'il existe quelque chose appelé proxy d'événement qui peut être utilisé. Je vais essayer ! J'ai donc réécrit une partie du code, comme ceci :

var thl= document.getElementById('thl');
thl.onclick = function(ev) {
  ev = ev || event;
  //兼容处理
  var target = ev.target || ev.srcElement;
　　//找到li元素
  if (target.nodeName.toLowerCase() == 'li') {
     fn();
   }
};

function fn (){
 console.log("maomaoliang");
}

En conséquence, cliquer sur le nouveau li a également déclenché la fonction fn. Eh bien, en tant que corps animé par la curiosité, comment pourrais-je ne pas demander plus d’explications ? Encore faut-il être plus pratique et comprendre le mystère qui se cache derrière.

Alors, j'ai regardé les informations de l'agent événementiel.

Tout d'abord, vous devez savoir ce qu'est le bouillonnement d'événement : lorsqu'un événement sur un élément est déclenché, par exemple, la souris clique sur un bouton, le même événement sera déclenché dans tous les éléments ancêtres de cet élément. Ce processus est appelé bouillonnement d’événements.

Ensuite, revenons à la question précédente « Comment comprendre littéralement le sens du terme agent événementiel », qui a organisé l'événement ? Ou qui représente l’événement ?
En prenant l'exemple de cet article, en regardant le code modifié, j'ai lié l'événement onlick à la balise ul au lieu de la balise li. Ainsi, lorsque je clique sur une balise li (qu'elle soit générée dynamiquement ou qu'elle existe auparavant), cet événement est comme une bulle, apparaissant et apparaissant. Dans des circonstances normales, ul sera également lié à onclick, et body sera également lié à onclick, ce qui signifie qu'il bouillonnera jusqu'à l'élément le plus racine. Mais j'ai lié un clic à ul ici, donc à ce moment-là, ul interceptera la bulle, l'événement cessera de monter et la balise body ne pourra pas être atteinte.

Ensuite, var target = ev.target || ev.srcElement; Cette phrase équivaut à me dire sur qui j'ai cliqué et qui est la cible. Si cette cible se trouve être la balise li if (target.nodeName.toLowerCase() == 'li'), alors exécutez la fonction fn.

Enfin, j'ai répondu fièrement à cette question : la table représente l'événement onlick !

4 Rappeler les étapes du proxy d'événement

Événement de liaison d'élément parent
L'élément parent sait qui est la cible réelle de l'événement
Nous devons juger la cible Si c'est l'élément dont nous avons besoin, une fonction de rappel se produira (nous devons donc apprendre à utiliser les sélecteurs)

5 Résumé final, deux avantages majeurs de l'agence événementielle

Les performances ont été accidentellement optimisées
Les éléments ajoutés dynamiquement peuvent également être liés à des événements

Six choses à noter sont

Ce qui précède concerne la liaison d'événements natifs js, si vous utilisez jquery. Et j'ai changé le code comme suit :

/*var thl= document.getElementById('ul1');
thl.onclick = function(ev) {
  ev = ev || event;
  //兼容处理
  var target = ev.target || ev.srcElement;
　　//找到li元素
  if (target.nodeName.toLowerCase() == 'li') {
     //li添加的事件
     fn();
   }
};*/

var node=document.createElement("li");
var textnode=document.createTextNode("maomaoliang");
node.appendChild(textnode);
document.getElementById("ul1").appendChild(node);

function fn (){
 console.log("maomaoliang");
}

$("#ul1").click(function(){
  fn();
});

De cette façon, la balise li nouvellement ajoutée peut également être liée au clic. N'est-ce pas très pratique et simple ? Pensez-vous qu'apprendre js est inutile ?

Haha, c'est normal de penser comme ça, je le pensais aussi, mais après avoir fait certaines choses, j'ai trouvé que jquery n'était vraiment pas suffisant ! Mais c’est largement suffisant !

Bien que les maîtres disent que vous devez apprendre js, je pense toujours que vous pouvez d'abord apprendre jquery, puis apprendre js plus tard, et l'effet sera bon.