334 votes

Impossible de comprendre l'attribut useCapture dans addEventListener

J'ai lu l'article à https://developer.mozilla.org/en/DOM/element.addEventListener mais incapable de comprendre useCapture attribut.Defination il est-

Si la valeur est true, useCapture indique que l'utilisateur souhaite lancer la capture. Après le lancement de la capture, tous les événements du type spécifié sera envoyé à l'organisme de l'auditeur avant d'être envoyés à n'importe quel EventTargets dessous dans l'arborescence DOM. Les événements qui sont en train de remonter vers le haut à travers l'arbre ne va pas déclencher un auditeur désigné pour l'utiliser de capture.

Dans ce code parent événement déclenche avant d'enfant,donc je ne suis pas en mesure de comprendre ses comportement.Objet Document a usecapture vrai et de l'enfant div a usecapture fausse et document usecapture est suivie.Alors pourquoi de propriété de document est préféré par rapport à l'enfant.

<html>
<head>
<script>
function load()
{
document.addEventListener("click",function(){alert("parent event")},true);
document.getElementById("div1").addEventListener("click",function(){alert("child event")},false);
}
</script>
</head>
<body onload="load()">
<div id="div1">click me</div>
</body>
</html>

395voto

Rob W Points 125904

Les événements peuvent être activés à deux reprises: Au début ("capture"), et à la fin ("bulle"). Les événements sont exécutés dans l'ordre de la façon dont elles sont définies. Dites, vous définissez 4 écouteurs d'événement:

window.addEventListener("click", function(){alert(1)}, false);
window.addEventListener("click", function(){alert(2)}, true);
window.addEventListener("click", function(){alert(3)}, false);
window.addEventListener("click", function(){alert(4)}, true);

Les boîtes d'alerte apparaîtra dans cet ordre:

  • 2 (définie d'abord, à l'aide de capture=true)
  • 4 (défini seconde à l'aide de capture=true)
  • 1 (premier événement défini avec capture=false)
  • 3 (deuxième événement défini avec capture=false)

306voto

lax4mike Points 968

Je trouve que ce diagramme est très utile pour comprendre les phases de capture / cible / bulle: http://www.w3.org/TR/2003/NOTE-DOM-Level-3-Events-20031107/events.html#Events-phases

95voto

Steely Wing Points 1857

Capturer l’événement vs événement Bubble

  • Capture sera expédition avant l’événement Bubble
  • Ordre de propagation des événements est1. Capture de parent
    1. Capturent des enfants
    2. Bulle d’enfants
    3. Bulle de parent

( `` s’arrêtera le flux)

Demo

23voto

sushil bharwani Points 10138

Lorsque vous dites useCapture = true, les événements sont exécutés de haut en bas lors de la phase de capture lorsque false effectue une bulle de bas en haut.

12voto

NilColor Points 1524

Il s’agit de modèles d’événement : http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow vous pouvez intercepter les événements dans la phase de propagation, ou dans la phase de capture. Votre choix.
Jetez un oeil à http://www.quirksmode.org/js/events_order.html - vous le trouverez très utile.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X