Bu basit addEventListener işlevinden sonra neden 'false' kullanılıyor?

Question 1

Sonunda yanlış ne için? Teşekkürler.

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

Question 2

MDN Web Belgelerine göre üçüncü parametre şudur:

useCapture
If true, useCapturekullanıcının yakalamayı başlatmak istediğini belirtir. Yakalama başlatıldıktan sonra, belirtilen türdeki tüm olaylar , DOM ağacında altındaki listenerherhangi bir EventTargets'ye gönderilmeden önce kaydedilene gönderilir . Ağaçta köpüren olaylar, yakalama kullanmak üzere belirlenmiş bir dinleyiciyi tetiklemez. Ayrıntılı açıklama için DOM Seviye 3 Olaylarına bakın .

Question 3

MDN'yi de kontrol ettim, ancak ne useCaptureişe yaradığını hala anlamadım , bu nedenle bu cevap resmi belgeleri kontrol ettikten sonra hala anlamayanlar içindir.

İlk olarak, hemen hemen tüm tarayıcılarda şunlar olur:

IE <9 hariç tüm tarayıcılarda, olay işlemenin iki aşaması vardır.

Olay önce aşağı iner - buna yakalama denir ve sonra kabarcıklar yükselir . Bu davranış W3C şartnamesinde standartlaştırılmıştır.

Bu, neye ayarladığınız önemli değil useCapture, bu iki olay aşaması her zaman var demektir.

Bu resim nasıl çalıştığını gösteriyor.

görüntü açıklamasını buraya girin

Bu modele göre olay:

Aşağı - 1 -> 2 -> 3'e kadar yakalar.

3 -> 2 -> 1 ile yukarı kabarcıklar.

Sonra sorunuz geliyor. Çağrılan 3. parametre useCapture, işleyicinizin olayı işlemesini istediğiniz iki aşamadan hangisini belirtir.

useCapture = true

İşleyici, yakalama aşamasına ayarlanır. Olaylar, çocuklarına ulaşmadan ona ulaşacak.

useCapture = false.

İşleyici, köpürme aşamasına ayarlanır. Olaylar çocuklarına ulaştıktan sonra ona ulaşacak.

bu, böyle bir kod yazarsanız:

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

alt öğeye tıklandığında, firstyöntem daha önce çağrılacaktır second.

Varsayılan olarak useCapturebayrak false değerine ayarlanmıştır, bu da işleyicinizin yalnızca olay köpürme aşamasında çağrılacağı anlamına gelir .

Ayrıntılı bilgi için bu referans bağlantısını ve bunu tıklayın .

Question 4

@ Terazi'nin cevabı çok iyi, benim gibi kodun makine ile etkileşimini daha iyi anlayan insanlar oluyor.
Bu nedenle aşağıdaki komut dosyası olay yayılımını açıklıyor olmalıdır. Bu açıklama şemasına dayanarak yapmaya çalıştığım şey şudur:
Aşağıdaki hiyerarşide aşağı ve yukarı olay akışı:

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

Basitlik uğruna, yakalama aşaması için işleyicileri kaydeden yayılma elemanına kadar gövdeden başlayacağız ve köpürme aşaması için gövde elemanı kayıt işleyicilerini geri alacağız. Yani sonuç, olayın başından sonuna kadar aldığı yön düğüm düğüm olacaktır. Günlüklere erişmek için lütfen ön bilginin sağ panelindeki "Konsolu göster" i tıklayın

    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>

Snippet'i genişlet

Odaklanma gibi olayların köpürmediğine dikkat edin, bu da olayların çoğunun köpürmesine neden olur.