Pourquoi «false» est-il utilisé après cette simple fonction addEventListener?

91

À quoi sert le faux à la fin? Merci.

window.addEventListener('load', function() {
  alert("All done");
}, false);
0x499602D2
la source

Réponses:

11

Selon MDN Web Docs , le troisième paramètre est:

useCapture
Si true, useCaptureindique que l'utilisateur souhaite lancer la capture. Après le lancement de la capture, tous les événements du type spécifié seront envoyés à l'enregistré listeneravant d'être envoyés à tout EventTargets en dessous dans l'arborescence DOM. Les événements qui bouillonnent vers le haut dans l'arborescence ne déclenchent pas un auditeur désigné pour utiliser la capture. Voir Evénements DOM de niveau 3 pour une explication détaillée.

Lucas Jones
la source
26
Je ne sais pas grand chose sur javascript, donc j'ai du mal à obtenir cette réponse. Je ne sais vraiment pas ce qu'est useCapture? Pouvez-vous m'en dire quelque chose.
Ashoka Mondal
1
@BikashChandraMondal consultez la réponse ci-dessous.
libra
34
Veuillez expliquer, ne vous contentez pas de copier / coller.
Damjan Pavlica
3
Quel copier-coller inutile.
Sebastian Palma
325

J'ai vérifié MDN aussi, mais je n'ai toujours pas compris à quoi cela useCaptureservait, donc cette réponse est pour ceux qui ne l'obtiennent toujours pas après avoir vérifié la documentation officielle.

Donc, tout d'abord, ce qui suit se produit dans presque tous les navigateurs:

Dans tous les navigateurs, sauf IE <9, il existe deux étapes de traitement des événements.

L'événement s'arrête d'abord - cela s'appelle la capture , puis monte en bulles . Ce comportement est standardisé dans la spécification W3C.

ce qui signifie que peu importe ce que vous définissez useCapture, ces deux phases d'événement existent toujours.

Cette image montre comment cela fonctionne.

entrez la description de l'image ici

Selon ce modèle, l'événement:

Capture vers le bas - jusqu'à 1 -> 2 -> 3.

Bulles vers le haut - jusqu'à 3 -> 2 -> 1.

Vient ensuite votre question. Le 3ème paramètre appelé useCaptureindique sur laquelle des deux phases vous voulez que votre gestionnaire gère l'événement.

useCapture = true

Le gestionnaire est défini sur la phase de capture. Les événements y parviendront avant d'arriver à ses enfants.

useCapture = false.

Le gestionnaire est défini sur la phase de bullage. Les événements y parviendront après avoir atteint ses enfants.

ce qui signifie que si vous écrivez du code comme celui-ci:

child.addEventListener("click", second);
parent.addEventListener("click", first, true);

en cliquant sur l'élément enfant, la firstméthode sera appelée avant second.

Par défaut, l' useCaptureindicateur est défini sur false, ce qui signifie que votre gestionnaire ne sera appelé que pendant la phase de propagation d' événements .

Pour des informations détaillées, cliquez sur ce lien de référence et ceci .

Balance
la source
13
Réponse très agréable et complète. Je le comprends beaucoup mieux que maintenant.
0x499602D2
15
Très bonne explication. La touche humaine, c'est ce qui fait la différence.
Rafael Eyng
1
J'apprécie vraiment cette explication.
neilsimp1
1
Très bonne réponse. Pouvez-vous également expliquer quelle approche doit être utilisée et quand?
Rahul Arora
1
Cela doit être la réponse sélectionnée. OP pouvez-vous faire ça?
Saurabh Tiwari
6

La réponse de @ Libra est très bonne, il se trouve que certaines personnes comme moi comprennent mieux l'interaction du code avec la machine.
Le script suivant devrait donc expliquer la propagation de l'événement. Ce que j'essaie de faire en fonction de ce schéma de description est:
Suivre le flux d'événements de bas en haut dans la hiérarchie suivante:

<window>
<document>
<body>
<section>
<div>
<paragraph>
<span>

Par souci de simplicité, nous allons commencer par le corps jusqu'aux gestionnaires d'enregistrement des éléments span pour la phase de capture, et revenir aux gestionnaires d'enregistrement des éléments body pour la phase de bullage. Le résultat serait donc nœud par nœud, la direction prise par l'événement du début à la fin. Veuillez cliquer sur "Afficher la console" dans le panneau de droite de l'extrait pour accéder aux journaux

    function handler(e){
        /* logs messages of each phase of the event flow associated with 
        the actual node where the flow was passing by */

        if ( e.eventPhase == Event.CAPTURING_PHASE ){
            console.log ("capturing phase :\n actual node : "+this.nodeName);
        }
        if ( e.eventPhase == Event.AT_TARGET){
            console.log( "at target phase :\n actual node : "+this.nodeName);
        }
        if ( e.eventPhase == Event.BUBBLING_PHASE){
            console.log ("bubbling phase :\n actual node : "+this.nodeName );
        }
    }

    /* The following array contains the elements between the target (span and you can
    click also on the paragraph) and its ancestors up to the BODY element, it can still
    go up to the "document" then the "window" element, for the sake of simplicity it is 
    chosen to stop here at the body element
    */

    arr=[document.body,document.getElementById("sectionID"),
    document.getElementById("DivId"),document.getElementById("PId"),
        document.getElementById("spanId")];

    /* Then trying to register handelers for both capturing and bubbling phases
    */
        function listener(node){
            node.addEventListener( ev, handler, bool )    
            /* ev :event (click), handler : logging the event associated with 
            the target, bool: capturing/bubbling phase */
        }
        ev="click";
        bool=true; // Capturing phase
        arr.forEach(listener);
        bool=false; // Bubbling phase
        /* Notice that both capturing and bubbling 
        include the at_target phase, that's why you'll get two `at_target` phases in
        the log */
        arr.forEach(listener);
        p {
            background: gray;
            color:white;
            padding: 10px;
            margin: 5px;
            border: thin solid black
        }
        span {
            background: white;
            color: black;
            padding: 2px;
            cursor: default;
        }
    <section ID="sectionID">
            <div  id="DivId">
                <p id="PId">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis <span id="spanId">CLICK ME </span> imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosq.
                </p>
            </div>
    </section>

Notez que les événements tels que la concentration ne bouillonnent pas, ce qui fait que la majorité des événements bouillonnent toujours.

user10089632
la source