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

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

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

4 ответа:

по данным MDC, третий параметр-это:

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

9

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

Итак, прежде всего, происходит следующее почти все браузеры:

во всех браузерах, кроме IE

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

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

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

enter image description here

согласно этой модели, в случае:

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

пузыри вверх-через 3 - > 2 - > 1.

ваш вопрос. 3-й парам называется useCapture указывает, на каком из двух этапов вы хотите, чтобы ваш обработчик обрабатывал событие.

useCapture = true

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

useCapture = false.

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

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

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

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

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

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

214

@Весы очень хорошие, есть просто некоторые люди, вроде меня, лучше понять взаимодействие кода с машиной.
Таким образом, следующий сценарий должен объяснять распространение событий. Что я пытаюсь сделать на основе этого описание схемы - это :
Следующие события текут вниз и вверх по следующей иерархии:

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

для простоты мы начнем с тела вплоть до элемента 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>

обратите внимание, что такие события, как фокус не пузырь, что делает sens еще он большинство событий пузырь.

2

Он определяет, является ли событие.

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

-6