इस सरल addEventListener फ़ंक्शन के बाद 'गलत' का उपयोग क्यों किया जाता है?

Question 1

आखिर में झूठ क्या है? धन्यवाद।

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

Question 2

MDN वेब डॉक्स के अनुसार , तीसरा पैरामीटर है:

useCapture
यदि true, useCaptureइंगित करता है कि उपयोगकर्ता कैप्चर आरंभ करना चाहता है। कब्जा शुरू करने के बाद, निर्दिष्ट प्रकार की सभी घटनाओं को डोम ट्री में listenerकिसी भी EventTargetएस के नीचे भेजे जाने से पहले पंजीकृत को भेज दिया जाएगा । पेड़ के माध्यम से ऊपर की ओर बुदबुदाने वाली घटनाएं कब्जा करने के लिए नामित श्रोता को ट्रिगर नहीं करेंगी। विस्तृत विवरण के लिए DOM स्तर 3 ईवेंट देखें ।

Question 3

मैंने MDN की भी जाँच की, लेकिन मुझे अभी भी समझ नहीं आया कि यह किस लिए useCaptureथा, इसलिए यह उत्तर उन लोगों के लिए है, जिन्होंने आधिकारिक दस्तावेज की जाँच करने के बाद भी इसे प्राप्त नहीं किया है।

तो सबसे पहले, निम्नलिखित लगभग सभी ब्रोवर्स में होता है:

IE <9 को छोड़कर सभी ब्राउज़रों में, इवेंट प्रोसेसिंग के दो चरण हैं।

घटना पहले नीचे जाती है - जिसे कैप्चरिंग कहा जाता है , और फिर बुलबुले उठते हैं । यह व्यवहार W3C विनिर्देश में स्पष्ट है।

जिसका अर्थ है कि आप जो भी सेट करते useCaptureहैं, ये दो घटना चरण हमेशा मौजूद रहते हैं।

यह चित्र दिखाता है कि यह कैसे काम करता है।

यहाँ छवि विवरण दर्ज करें

इस मॉडल के अनुसार, घटना:

नीचे कब्जा - 1 के माध्यम से -> 2 -> 3।

बुलबुले - 3 के माध्यम से -> 2 -> 1।

फिर आपका सवाल आता है। तीसरा परम कहा जाता है useCaptureकि आप अपने हैंडलर को किन दो चरणों में घटना को संभालना चाहते हैं।

useCapture = true

हैंडलर कैप्चरिंग चरण पर सेट किया गया है। घटनाएँ उसके बच्चों तक पहुँचने से पहले हो जाएँगी।

useCapture = false।

हैंडलर बुबलिंग चरण पर सेट किया गया है। इसके बच्चों को मिलने के बाद ईवेंट मिलेंगे।

जिसका अर्थ है कि यदि आप इस तरह कोड लिखते हैं:

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

बाल तत्व पर क्लिक करते समय, firstविधि को पहले बुलाया जाएगा second।

डिफ़ॉल्ट रूप से, useCaptureध्वज को गलत पर सेट किया गया है जिसका अर्थ है कि आप हैंडलर को केवल ईवेंट बबलिंग चरण के दौरान ही बुलाएंगे ।

विस्तृत जानकारी के लिए, इस संदर्भ लिंक और इस पर क्लिक करें ।

Question 4

@ तुला का जवाब बहुत अच्छा है, मेरे जैसे कुछ लोग ही होते हैं जो मशीन के साथ कोड की बातचीत को बेहतर समझते हैं।
तो निम्नलिखित स्क्रिप्ट को घटना प्रसार की व्याख्या करनी चाहिए। मैं इस विवरण स्कीमा के आधार पर क्या करने की कोशिश कर रहा हूं :
निम्नलिखित घटना नीचे और ऊपर पदानुक्रम का प्रवाह है:

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

सादगी के लिए, हम बॉडी पर शुरू करेंगे, जो कैप्चरिंग चरण के लिए हैंडलर रजिस्टर करने वाले स्पैन एलिमेंट के नीचे होगा, और बॉबल एलिमेंट के लिए बॉबलिंग चरण के लिए हैंडलर को रजिस्टर करना होगा। तो परिणाम घटना से शुरू से अंत तक दिशा को नोड द्वारा नोड किया जाएगा। लॉग का उपयोग करने के लिए कृपया स्निपेट के दाहिने पैनल पर "शो कंसोल" पर क्लिक करें

    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>

स्निपेट का विस्तार करें

ध्यान दें कि ईवेंट फ़ोकस बबल नहीं है, जिससे समझ में आता है कि वह अधिकांश ईवेंट बबल करता है।