Подтвердить что ты не робот

Почему "false" используется после этой простой функции addEventListener?

Что такое ложь в конце? Спасибо.

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

Ответ 1

Согласно MDN Web Docs, третий параметр:

useCapture
Если true, useCapture указывает, что пользователь желает начать захват. После инициирования захватывать все события указанного тип будет отправлен на зарегистрирован listener до того, как отправлено любому EventTarget ниже это в дереве DOM. События, которые пузыриться вверх через дерево будет не вызывать слушателя, назначенного использовать захват. Смотрите DOM Level 3 Events для подробного объяснения.

Ответ 2

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

Итак, в первую очередь, происходит почти во всех браузерах:

Во всех браузерах, кроме IE < 9, существует два этапа обработки событий.

Событие сначала идет вниз - это называется захват, а затем пузырится вверх. Такое поведение стандартизировано в спецификации W3C.

что означает, что независимо от того, что вы установили useCapture, эти две фазы событий всегда существуют.

На этом рисунке показано, как это работает.

enter image description here

В соответствии с этой моделью событие:

Захватывает вниз - через 1 → 2 → 3.

Пузыри вверх - через 3 → 2 → 1.

Тогда возникает ваш вопрос. Третий параметр useCapture указывает, на какой из двух фаз вы хотите, чтобы обработчик обработал событие.

useCapture = true

Обработчик установлен на этапе захвата. События доберутся до его детей.

useCapture = false.

Обработчик установлен на фазу барботажа. События доберутся до его детей.

что означает, что если вы пишете такой код:

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

при нажатии дочернего элемента метод first будет вызываться до second.

По умолчанию флаг useCapture установлен на false, что означает, что обработчик будет вызываться только во время события пузырька.

Для получения подробной информации нажмите эту ссылку ссылки и this.

Ответ 3

@Ответ на Libra очень хорош, просто случаются такие люди, как я, которые лучше понимают взаимодействие кода с машиной.
Таким образом, следующий script должен объяснять распространение события. То, что я пытаюсь сделать на основе этой схемы описания:
После потока событий вниз и вверх по следующей иерархии:

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

Для простоты мы начнем с тела вниз до элемента управления регистрами элементов диапазона для фазы захвата и вернемся к элементам регистрации элементов тела для фазы барботирования. Таким образом, результатом будет node на node направление, принимаемое событием от начала до конца. Нажмите "Показать консоль" на правой панели фрагмента, чтобы получить доступ к журналам

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

Ответ 4

Определяет, будет ли зафиксировано событие.

Подробнее здесь