この単純なaddEventListener関数の後に「false」が使用されるのはなぜですか？

Question 1

最後に何が間違っているのですか？ありがとう。

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

Question 2

MDN Web Docsによると、3番目のパラメータは次のとおりです。

useCaptureの
場合true、useCaptureユーザーがキャプチャを開始することを希望していることを示します。キャプチャを開始した後、指定されたタイプのすべてのイベントは、DOMツリー内のその下のlistener任意のにディスパッチされる前に、登録済みにディスパッチされEventTargetます。ツリーを上向きにバブリングしているイベントは、キャプチャを使用するように指定されたリスナーをトリガーしません。詳細な説明については、DOMレベル3イベントを参照してください。

Question 3

私もMDNをチェックしましたが、それが何のためにあるのかまだ理解できなかったuseCaptureので、この回答は公式ドキュメントをチェックした後もまだそれを取得していない人のためのものです。

したがって、まず第一に、ほとんどすべてのブロワーで次のことが起こります。

IE <9を除くすべてのブラウザーには、イベント処理の2つの段階があります。

イベントは最初にダウンします-それはキャプチャと呼ばれ、次にバブルアップします。この動作は、W3C仕様で標準化されています。

つまり、何に設定しuseCaptureても、これら2つのイベントフェーズは常に存在します。

この写真はそれがどのように機能するかを示しています。

ここに画像の説明を入力してください

このモデルによると、イベント：

キャプチャダウン-1から1-> 2-> 3。

泡立ち-から3-> 2-> 1。

それからあなたの質問が来ます。呼び出される3番目のパラメーターはuseCapture、ハンドラーにイベントを処理させる2つのフェーズのどちらかを示します。

useCapture = true

ハンドラーはキャプチャーフェーズで設定されます。イベントは、その子に到達する前に到達します。

useCapture = false。

ハンドラーはバブリングフェーズに設定されます。イベントは、その子に到達した後に到達します。

つまり、次のようなコードを書くと、次のようになります。

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

子要素をクリックすると、firstメソッドが前に呼び出されsecondます。

デフォルトでは、useCaptureフラグはfalseに設定されています。これは、ハンドラーがイベントバブリングフェーズ中にのみ呼び出されることを意味します。

詳細については、この参照リンクとこれをクリックしてください。

Question 4

@Libraの答えは非常に良いです。コードとマシンの相互作用をよりよく理解している私のような人がたまたまいます。
したがって、次のスクリプトはイベントの伝播を説明しているはずです。この記述スキーマに基づいて私がやろうとしていることは
、次のとおりです。次のイベントフローを上下に移動します。

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

スニペットを展開

フォーカスなどのイベントはバブルしないことに注意してください。これにより、イベントの大部分はバブルします。