En JavaScript, se heurtent souvent à un certain nombre de circonstances pour écouter la liste li, supposons que nous avons une liste comme suit:

  Copiez le code est le suivant:

  

      

  • objet 1
  •   

  • item2
  •   

  • item3
  •   

  • item4
  •   

  Si nous voulons atteindre les fonctions suivantes: Lorsque les clics de souris sur un li, sortie d''alerte le contenu du li, nous sommes habituellement écrit comme ceci:

  Lorsque les éléments de la liste comparer bas, ajouter un événement onclick directement à chaque li

  Comparez la liste des articles pendant une longue période, donner à chaque élément de la liste lors de l''écoute appelant onload

  La première approche est simple et directe, mais sans tenir compte de la séparation de JavaScript html, n''est pas recommandé, le code de la deuxième méthode sont les suivants:

  Copiez le code est le suivant:

  fenêtre.onload = function () {

  var = ulNode documents.getElementById ( "liste");

  var liNodes = ulNode.childNodes || ulNode.enfants;

  for (var i = 0; i

  liNodes [i].addEventListener ( ''click'', function (e) {

  alerte (e.cible.innerHTML);

  }, Faux);

  }

  }

  Peut être vu de ce qui précède, si elles sont conservées supprimer ou ajouter li, la fonction () ne doit pas l''opération de changement d''arrêt, sujette à l''erreur, il est recommandé à la délégation d''événements d''utilisation, avant d''utiliser l''agence événementielle, nous avons d''abord regarder à l''étape de l''événement ( phase événement):

  phases de l''événement:

  Lorsqu''un événement DOM est déclenché, il n''a pas été déclenché que dans son origine un objet une fois, mais passera par trois phases distinctes.En bref: Agenda commencer à circuler à l''objet cible (la phase de capture) à partir du noeud racine du document, et ensuite dans la direction de la cible est déclenché (phase cible), puis de nouveau vers le noeud racine du document (la phase de formeation de bulle), comme illustré sur la figure (photo du W3C):

  

  phase de capture d''événements (phase de capture)

  La première phase de l''événement est de capturer l''étape.Evénements à partir du noeud racine du document, la structure de l''arbre DOM à l''écoulement vers les événements de noeud cible.Chemin à travers tous les niveaux de noeuds DOM et de déclencher un événement de capture sur chaque n?ud, le n?ud de destination jusqu''à ce que l''heure d''arrivée.La tache principale est de reprendre la phase de capture d''un canal, dans la phase bouillonnante, le temps va passer ce retour au document chemin racine.

  Copiez le code est le suivant:

  élément.removeEventListener (, , );

  Nous avons mis cette fonction par l''écoute ci-dessus au n?ud, vous pouvez être, la valeur true pour ajouter la fonction de rappel de l''écouteur pour la phase de capture de l''événement.Dans la pratique, nous n''avons pas beaucoup utiliser les écouteurs de la phase de capture cas d''utilisation, mais par la manipulation de l''incident à l''étape de capture, nous pouvons empêcher similaire à l''événement click est déclenché sur un élément particulier.

  Copiez le code est le suivant:

  forme var = documents.querySeletor ( ''forme'');

  form.addEventListener ( ''click'', function (e) {

  e.stopPropagation ();

  }, Vrai);

  Si vous ne connaissez pas grand-chose à propos de cet usage, il est préférable de mettre à faux, ou indéfini, et écoute ainsi à la phase de propagation de l''événement.

  scène cible (phase cible)

  Lorsqu''un événement atteint le n?ud cible, l''événement est entré dans le cadre de l''étape.L''événement est déclenché sur le n?ud cible, puis reflux inverse, sachant se propager à la couche la plus externe du n?ud de documents.

  Pour les noeuds imbriqués, les événements de la souris et pointeur seront souvent positionnés sur l''élément le plus interne.Supposons que vous configurez une fonction d''écoute, cliquez sur un élément div, l''utilisateur clique sur les éléments p dans l''élément div, l''élément p est l''élément cible de ce temps.événement bouillonnant afin que nous puissions écouter pour l''événement, cliquez sur le dessus de la div éléments ou plus, et le temps du processus de communication déclenche une fonction de rappel.

  phase de bullage (bulles Phase)

  Après l''événement est déclenché sur l''événement cible, ne se termine pas sur cet élément.Comme il des couches de bulles d''un arbre DOM, le n?ud racine jusqu''à ce qu''il atteigne le plus à l''extérieur.C''est le parent d''un parent, le même événement une fois que le noeud cible, le n?ud parent.Jusqu''à ce que les déclencheurs de noeud plus à l''extérieur.

  La grande majorité des événements sera bouillonne, mais pas tous.DéTAILLéE Visible: Spécification

  On peut penser à l''événement peut être utilisé pour mettre en ?uvre écoutes procuration à chacun d''un li.Afficher le code ci-dessous:

  Copiez le code est le suivant:

  fenêtre.onload = function () {

  var = ulNode documents.getElementById ( "liste");

  ulNode.addEventListener ( ''click'', function (e) {

  si (e.cible && e.cible.nodeName.toUpperCase () == "LI") {

  alerte (e.cible.innerHTML);

  }

  }, Faux);

  };

  Ce qui précède est le contenu de cet article, je l''espère pour vous familiariser avec l''événement javascript pour nous tous et agents commissionnés à l''aide.

  S''il vous pla?t prendre un moment pour partager des articles à vos amis, ou laisser un commentaire.Nous vous en remercions sincèrement pour votre soutien!

  Vous pouvez également être intéressé par l''article: délégué événement js agence événement délégués événement d''études de cas ou d''un événement de usages courtier détaillé détaillée proxy événement js (délégué) courtier d''événements JavaScript et mis en service une analyse approfondie javascript détaillée d''analyse courtier d''événements Javascript dans événement événements javascript ligne de la table de la méthode d''affichage des événements JavaScript par intérim JavaScript proxy besoin proxy préliminaire à faire attention en mettant en évidence l''agence d''événements

événements JavaScript et agents d''étude de cas commandée

Recommend Article: