Чому після цієї простої функції addEventListener використовується "false"?

Question 1

Для чого в кінці брехне? Дякую.

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

Question 2

Згідно з веб-документами MDN , третім параметром є:

useCapture
If true, useCaptureвказує на те, що користувач хоче розпочати захоплення. Після ініціації захоплення всі події зазначеного типу будуть відправлені зареєстрованим listenerперед відправленням на будь-які EventTargets під ним у дереві DOM. Події, які бурчать вгору по дереву, не спричинять слухача, призначеного для використання захоплення. Див DOM Level 3 для докладного пояснення.

Question 3

Я також перевірив MDN, але досі не зрозумів, для чого useCaptureвін потрібен, тому ця відповідь для тих, хто все ще не отримує його після перевірки офіційної документації.

Отже, перш за все, майже у всіх браузерів відбувається таке:

У всіх браузерах, крім IE <9, існує два етапи обробки подій.

Спочатку подія знижується - це називається захопленням , а потім бульбашками вгору . Така поведінка стандартизована у специфікації W3C.

що означає, що незалежно від того, для чого ви встановили useCapture, ці дві фази події завжди існують.

Ця картинка показує, як це працює.

введіть тут опис зображення

Відповідно до цієї моделі подія:

Знімає вниз - через 1 -> 2 -> 3.

Бульбашки вгору - через 3 -> 2 -> 1.

Потім приходить ваше запитання. 3-й параметр, що називається, useCaptureвказує, на якій з двох фаз ви хочете, щоб ваш обробник обробляв подію.

useCapture = true

Обробник встановлюється на фазі захоплення. Події дістануться до нього, перш ніж дістатися до своїх дітей.

useCapture = false.

Обробник встановлений на фазі барботування. Події потраплять до нього після потрапляння до його дітей.

це означає, що якщо ви пишете такий код:

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

при натисканні дочірнього елемента firstметод буде викликаний раніше second.

За замовчуванням для useCaptureпрапора встановлено значення false, що означає, що ваш обробник буде викликаний лише під час фази спливання подій .

Для отримання детальної інформації натисніть це посилання на посилання та це .

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>

Розгорніть фрагмент

Зверніть увагу, що такі події, як фокус, не пузиряться, що змушує сенс, як і раніше, більшість подій пузиритися.