Incapable de comprendre useCapture paramètre dans la méthode addEventListener
J'ai lu l'article à https://developer.mozilla.org/en/DOM/element.addEventListener mais incapable de comprendre useCapture
attribut. Définition:
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.
JS:
function load() {
document.addEventListener("click", function() {
alert("parent event");
}, true);
document.getElementById("div1").addEventListener("click", function() {
alert("child event");
}, false);
}
HTML:
<body onload="load()">
<div id="div1">click me</div>
</body>
Vous devez vous connecter pour publier un commentaire.
Événements peut être activé à 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:
JS:
Les boîtes d'alerte apparaîtra dans cet ordre:
2
(défini tout d'abord, à l'aide decapture=true
)4
(défini seconde à l'aide decapture=true
)1
(premier événement défini aveccapture=false
)3
(deuxième événement défini aveccapture=false
)no specification is made as to the order in which they will receive the event with regards to the other EventListeners on the EventTarget
. Je n'ai pas testé tous les navigateurs, de sorte qu'ils peuvent tout simplement se faire de l'appliquer de la même manière. La Capture des événements, cependant, être fait avant de non-capture d'événements.Je trouve ce schéma est très utile pour la compréhension de la capture/cible/bulle phases:
http://www.w3.org/TR/2003/NOTE-DOM-Level-3-Events-20031107/events.html#Events-phases
Ci-dessous, contenu extrait du lien.
Phases
L'événement est distribué suivant une trajectoire à partir de la racine de l'arbre de ce nœud cible. Il peut ensuite être traitées localement au niveau de la cible au niveau du nœud ou de toute cible ancêtres du supérieur dans l'arborescence. L'événement dispatching (également appelé la propagation de l'évènement) se déroule en trois phases et de l'ordre suivant:
à partir de la racine de l'arbre pour le parent direct du nœud cible.
les ancêtres du parent direct de la cible noeud à la racine de
l'arbre.
Aux ancêtres de la cible sont déterminés avant le premier envoi de l'événement. Si le nœud cible est supprimé lors de l'envoi, ou d'une cible ancêtre est ajouté ou supprimé, la propagation de l'évènement sera toujours basé sur le noeud cible et aux ancêtres de la cible déterminée avant l'expédition.
Certains événements peuvent pas nécessairement accomplir les trois phases du DOM de flux d'événements, par exemple, l'événement ne peut être défini pour une ou deux phases. Comme un exemple, les événements définis dans cette spécification de toujours accomplir les phases de capture et cible, mais certains ne permettront pas d'atteindre la phase de propagation ("événements de propagation" versus "non-événements de propagation", voir également l'Événement.bulles d'attribut).
Window
, au lieu dedocument
, parce quedocument
est un enfant deWindow
?Capture (
useCapture = true
) vs Bulle Événement (useCapture = false
)MDN Référence
useCapture
paramètre n'a pas d'importance (Merci @bam et @legend80s)stopPropagation()
permet d'arrêter le débitDémo
Résultat:
Enfants De Capture
(Parce que les Enfants est la cible, de sorte que la Capture et la Bulle va déclencher dans l'ordre où ils ont été enregistrés)
JS:
HTML:
Events in the target phase will trigger all listeners on an element in the order they were registered, regardless of the useCapture parameter.
À partir de developer.mozilla.org/en-US/docs/Web/API/EventTarget/.... Donc, il n'existe pas de phase de "les Enfants de Capture" et "les Enfants de la Bulle".Quand vous dites useCapture = true les Événements d'exécuter du haut vers le bas dans la phase de capture si la valeur est false, il ne une bulle du bas vers le haut.
Exemple de Code:
Code Javascript:
si les deux sont mis à false
Exécute: Onclicking Intérieur de la Div, les alertes sont affichées en tant que:
Div 2 > Div 1
Ici le script est exécuté à partir de l'intérieur de l'élément: remontée d'Événements (useCapture a été définie à false)
div 1 est définie sur true et div 2 est définie sur false
Exécute: Onclicking Intérieur de la Div, les alertes sont affichées en tant que:
Div 1 > Div 2
Ici le script est exécuté à partir de l'ancêtre /élément externe: Cas de la Capture (useCapture a été définie sur true)
div 1 est définie sur false et div 2 est définie sur true
Exécute: Onclicking Intérieur de la Div, les alertes sont affichées en tant que:
Div 2 > Div 1
Ici le script est exécuté à partir de l'intérieur de l'élément: remontée d'Événements (useCapture a été définie à false)
div 1 est définie sur true et div 2 est définie sur true
Exécute: Onclicking Intérieur de la Div, les alertes sont affichées en tant que:
Div 1 > Div 2
Ici le script est exécuté à partir de l'ancêtre /élément externe: Cas de la Capture depuis useCapture a été définie sur true
Il est tout au sujet de modèles d'événement: http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow
Vous pouvez prendre de l'événement dans la phase de propagation ou de la capture de phase. Votre choix.
Jetez un oeil à http://www.quirksmode.org/js/events_order.html - vous trouverez qu'il est très utile.
Donné les trois phases de l'événement voyage:
useCapture
indique pour quelles phases de l'événement voyage sera sur:Source est la même que la deuxième meilleure réponse: https://www.w3.org/TR/2003/NOTE-DOM-Level-3-Events-20031107/events.html#Events-phases
Résumé:
La
DOM
spec décrites dans:https://www.w3.org/TR/2003/NOTE-DOM-Level-3-Events-20031107/events.html#Events-phases
fonctionne de la manière suivante:
Un événement est distribué suivant une trajectoire à partir de la racine (
document
) de l'arbre de la nœud cible. Le noeud cible est la plus profondeHTML
élément, c'est à dire l'événement.cible. L'événement dispatching (également appelé la propagation de l'évènement) se déroule en trois phases et de l'ordre suivant:document
) pour le parent direct du nœud cible.html
élément sur lequel l'événement a été dispachted.Exemple:
JS:
CSS:
HTML:
L'exemple ci-dessus illustre vraiment la différence entre la remontée d'événements et des événements de la capture. Lors de l'ajout des écouteurs d'événement avec
addEventListener
, il y a un troisième élément appelé useCapture. Cetteboolean
qui, lorsque mis àtrue
permet à l'écouteur d'événement à l'utilisation de la capture à la place de remontée d'événements.Dans notre exemple, lorsque nous avons fixé la useCapture argument
false
nous voyons que la remontée d'événements a lieu. D'abord le cas lors de la phase cible est déclenché (journaux innerBubble), puis via un événement bouillonnement de l'événement dans l'élément parent est déclenché (journaux outerBubble).Lorsque nous avons fixé la useCapture argument
true
, nous voyons que l'événement à l'extérieur<div>
est tiré en premier. C'est parce que l'événement est maintenant tiré dans la phase de capture et de ne pas la phase de propagation.L'ordre de définition seulement si les éléments sont au même niveau. Si vous inversez l'ordre de définition dans votre code, vous obtiendrez les mêmes résultats.
Toutefois, si vous inversez le useCapture réglage sur les deux gestionnaires d'événements, l'enfant du gestionnaire d'événement répond avant que de la mère. La raison pour cela est que l'enfant du gestionnaire d'événements va maintenant être déclenché lors de la phase de capture, qui est préalable à la phase de propagation dans lesquelles la société mère du gestionnaire d'événement sera déclenché.
Si vous définissez useCapture de vrai à la fois pour les gestionnaires d'événements, quel que soit l'ordre de la définition du parent gestionnaire d'événement sera déclenché en premier, car il s'agit avant même que l'enfant en phase de capture.
À l'inverse, si vous définissez useCapture à false pour les gestionnaires d'événements, encore une fois quel que soit l'ordre de définition, l'enfant de gestionnaire d'événement sera déclenché en premier, car il s'agit avant que le parent dans la phase de propagation.