js-qa.md

JavaScript Questions&Answers

Как можно сгенерировать некоторое событие и обработать его в коде?

// Создаём объект-событие
const event = new Event("build");

// Добавляем подписчика на событие
elem.addEventListener(
    "build",
    (e) => {
        /* … */
    },
    false,
);

// Доставляем событие подписчикам
elem.dispatchEvent(event);

Кроме класса Event, существуют специализированные события (например, MouseEvent):

// Создаём событие
const event = new MouseEvent("click", {
    view: window,
    bubbles: true,
    cancelable: true,
});
// Применяем событие к конкретному элементу DOM
const cb = document.getElementById("checkbox");
const cancelled = !cb.dispatchEvent(event);

Если нам нужно передать какие-то данные в событии, мы можем использовать класс CustomEvent:

const event = new CustomEvent("build", { detail: elem.dataset.time });

Что такое microtasks и macrotasks

Термины относятся к Event Loop и очереди сообщений. Событие может возникнуть в момент, когда движок JS выполняет некоторые действия, например, обрабатывает некоторое событие. JavaScript не сможет сразу же начать обрабатывать новое событие и поместит его в очередь событий. Когда движок JS выполнит текущую задачу, он обратиться в очередь из возьмёт из неё одну из задач.

С целью оптимизации процесса обработки событий из очереди сообщений, было введено два типа задач:

• макро-задачи - связаны с обработкой действий пользователя в браузере: перемещение курсора мыши, нажатие кнопок, и т.д.
• микро-задачи - действия, связанные в блокирующий I/O и Promises

Движок JS сначала выполняет все микро-задачи, а затем уже выполняет макро-задачи.