Цикл событий JavaScript: разные очереди для разных типов событий? - PullRequest
Новая
       1

Цикл событий JavaScript: разные очереди для разных типов событий?

1 голос
/ 15 октября 2019

Выдержка из книги «Тайны ниндзя JavaScript»:

СОБЫТИЯ АСИНХРОННЫЕ

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

Могут происходить следующие типы событий, среди прочего:

■ События браузера, например, когдазагрузка страницы завершена или когда она должна быть выгружена

■ Сетевые события, такие как ответы, поступающие с сервера (события Ajax, серверные события)

■ Пользовательские события, такие как щелчки мыши,мышь перемещается и нажимает клавишу

■ События таймера, например, когда истекает тайм-аут или срабатывает интервал

Все ли перечисленные выше события обрабатываются одной и той же очередью в цикле событий? У меня появилось это сомнение при попытке проверить событие щелчка DOM в сценарии: 

<html>

<body>
    <button id="bId">A button</button>

</body>
<script>
    function testing() {
        document.getElementById('bId').addEventListener("click", function () {
            console.log('clicked');
        })
        console.log('before click');
        document.getElementById('bId').click();
        console.log('after click')
    };
    testing();
</script>

</html>

Как я понимаю, любые асинхронные события (такие как таймер, обещания), использующие очередь цикла событий, будут ожидать пустого стека вызовов.

ВПриведенный выше код, если события DOM использовали очередь цикла событий, не должен печатать выходные данные clicked после вызовов функций before click и after click console.log()?

Существуют ли отдельные типы очередей дляразличные виды событий?

1 Ответ

2 голосов
/ 15 октября 2019

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

Это то, что mdn должен сказать:

Отправляет событиев указанной EventTarget (синхронно) , вызывая затронутые EventListeners в соответствующем порядке. Обычные правила обработки событий (включая фазу захвата и необязательного всплытия) также применяются к событиям, отправляемым вручную с помощью dispatchEvent ().

Но я почти уверен, что это не тот случай, когда пользователь физически щелкает по элементу. 

<html>

<body>
    <button id="bId">A button</button>

</body>
<script>
    function testing() {
        document.getElementById('bId').addEventListener("click", function () {
            console.log('clicked');
        })
        console.log('before click');

        var el = document.getElementById('bId');
        var event;
        if (window.CustomEvent) {
           event = new CustomEvent('click');
        } else {
           event = document.createEvent('click');
           event.initCustomEvent('click', true, true);
        }
        el.dispatchEvent(event);
        console.log('after click')
    };
    testing();
</script>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...