Why is 'false' used after this simple addEventListener function?

前端 未结 3 1744
北海茫月
北海茫月 2020-12-07 07:23

What is the false for at the end? Thanks.

window.addEventListener(\'load\', function() {
  alert(\"All done\");
}, false);
3条回答
  •  误落风尘
    2020-12-07 07:48

    @Libra's answer is very good, there just happen to be some people like me who understand better the interaction of the code with the machine.
    So the following script should be explaining the event propagation. What I'm trying to do based this description schema is :
    Following event flow down and up the following hierarchy :

    
    
    
    

    For the sake of simplicity we'll start at the body down to the span element registering handlers for the capturing phase, and back up to the body element registering handlers for the bubbling phase. So the result would be node by node the direction taken by the event from the start to the end. Please click "Show console " on the right panel of the snippet to access the logs

        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;
            }
        

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis CLICK ME imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosq.

    Notice that events such as focus don't bubble, which makes sens still he majority of events do bubble.

提交回复
热议问题