Délégation d'événement en javascript (tutoriel image et texte)-js tutoriel-php.cn

Délégation d'événement en javascript (tutoriel image et texte)

亚连

Libérer： 2018-05-19 14:53:30

original

1230 Les gens l'ont consulté

Cet article présente principalement des informations pertinentes sur l'explication détaillée de la délégation d'événement en JavaScript. Les amis qui en ont besoin peuvent s'y référer

J'ai vu une question d'entretien ces jours-ci, qui vous demandait probablement de donner 1 000 li Comment. dois-je ajouter un événement de clic ? La première impression de la plupart des gens peut être d'en ajouter un à chaque li. Si tel est le cas, on estime qu'ils seront GG lors de l'interview, nous avons ici retiré nos mécanismes de bouillonnement et de capture d'événements. ainsi que les mécanismes de délégation d'événements, examinons lentement ce qui précède

Parlons d'abord du bouillonnement d'événements et des mécanismes de capture d'événements. La capture d'événements a été proposée par Netscape. les deux sociétés étaient à couteaux tirés. Plus tard, le W3C n'a eu d'autre choix que d'adopter une méthode de compromis. Lorsqu'un événement se produit, il est d'abord capturé puis diffusé.

Habituellement, il existe trois façons d'écouter les événements. en js, à savoir :

　ele.addEventListener(type,listener,[useCapture]);//IE6~8 ne prend pas en charge

　ele.attachEvent ('on'+type,listener);//Supporté par IE6~10, non pris en charge par IE11

　ele.onClick=function(){} ;//Tous les navigateurs prennent en charge

La spécification w3c définit trois étapes d'événement, qui sont l'étape de capture, l'étape cible et l'étape de bouillonnement. Dans la réglementation du niveau dom2 spécifiée par w3c, c'est addEventListener qui écoute les événements. nous utiliserons addEventListener pour expliquer. Tout d'abord, les bulles sont comme lorsque vous jetez une pierre dans l'eau, les bulles dans l'eau surgissent du bas, ce qui signifie qu'une fois l'événement déclenché, les bulles montent. L'élément enfant vers l'élément parent déclenche la direction, tandis que le mécanisme de capture est exactement le contraire. Le mécanisme de capture déclenche des événements de l'élément parent vers l'élément enfant, et le troisième paramètre de la fonction addEventListener est utilisé pour décider d'utiliser ou non l'élément enfant. mécanisme de capture ou mécanisme de bouillonnement. Lorsque useCapture est vrai, c'est le mécanisme de capture. Lorsque useCapture est faux, c'est le mécanisme de bouillonnement. Regardons l'exemple :

Copier le code

<p class="parent">
  <p class="child">

  </p>
</p>
<script>
  var parent = document.getElementsByClassName(&#39;parent&#39;)[0];
  var child = document.getElementsByClassName(&#39;child&#39;)[0];

  parent.addEventListener(&#39;click&#39;,function(){
    console.log("这里是父元素");
  },false);
  child.addEventListener(&#39;click&#39;,function(){
    console.log("这里是子元素");
  },false);
</script>

Copier après la connexion

<. 🎜>

Lorsque nous cliquons sur L'élément enfant est affiché dans l'image ci-dessus. Lorsque nous changeons false en true, nous constaterons que l'ordre d'exécution sera inversé. C'est la différence entre le bouillonnement d'événements et. capture. Ils sont tout le contraire,

Ensuite, l'inconvénient de l'utilisation de ce mécanisme de liaison est qu'il est très fastidieux de lier des événements à chaque objet. nous voulons supprimer un événement ou modifier un événement. , et plus important encore, nous avons augmenté l'association entre les nœuds JavaScript et DOM, et s'il y a une référence circulaire, cela risque de provoquer des fuites de mémoire, <🎜. >

Alors comment résoudre cet inconvénient Une méthode est la délégation d'événements. Cette méthode vous permet d'éviter d'ajouter des événements à chaque nœud un par un. Ce qu'elle fait, c'est lier ces événements d'écoute aux éléments parents de ces nœuds. element La fonction d'écoute de on détermine automatiquement quel élément enfant a déclenché l'événement, afin que l'élément enfant qui a déclenché l'événement puisse être utilisé. L'exemple que nous donnons ici est un exemple donné par Davidwalsh :

Maintenant, nous avons un parent. élément ul et plusieurs éléments enfants li,

Ce que nous voulons réaliser maintenant, c'est que lorsque nous cliquons sur chaque nœud li, le contenu du nœud li sera affiché, selon la méthode d'écriture ci-dessus, vous pouvez sélectionner ces li, leur ajouter ces méthodes, puis les supprimer lorsqu'elles ne sont plus nécessaires. S'il y en a 100 li ou 1 000 li, cela deviendra votre cauchemar. Mieux vaut ajouter un événement d'écoute au parent. élément. La question suivante est de savoir comment déterminer sur quel li a été cliqué ? Nous pouvons juger la cible de l'événement en cours dans l'événement d'écoute pour déterminer si c'est le nœud que nous recherchons. Ici, nous avons un exemple simple :

<ul id="parent-list">
  <li id="post-1">Item 1</li>
  <li id="post-2">Item 2</li>
  <li id="post-3">Item 3</li>
  <li id="post-4">Item 4</li>
  <li id="post-5">Item 5</li>
  <li id="post-6">Item 6</li>
</ul>

Copier après la connexion

Lorsqu'un événement de clic se produit dans ul, comme addEventListener est un événement bouillonnant par défaut, l'événement d'écoute sera exécuté lorsque l'événement sous-jacent bouillonne. Après le déclenchement de l'événement. Enfin, nous vérifions s'il s'agit de l'élément cible. nous recherchons. Sinon, il sera ignoré. Nous pouvons alors non seulement vérifier si la balise de l'élément cible est l'élément cible dont nous avons besoin, mais nous pouvons également utiliser l'attribut ou le nom de classe de l'élément cible. pour la détection, utilisez l'API ele.maeches pour le traitement

// 找到父元素,绑定一个监听事件
document.getElementById("parent-list").addEventListener("click", function(e) {
  // e.target是点击的元素
  // 如果它是li元素
  if(e.target && e.target.nodeName == "LI") {
    //
    console.log("List item ", e.target.id.replace("post-", ""), " was clicked!");
  }
});

Copier après la connexion

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

document.getElementById("myp").addEventListener("click",function(e) {
  // e.target 就是当前被点击的元素
 if (e.target && e.target.matches("a.classA")) {
  console.log("Anchor element clicked!");
  }
});

Copier après la connexion