К какой очереди относятся обработчики событий, например onclick?

В браузере JavaScript выполняется в одном потоке, а асинхронность обеспечивается циклом событий (event loop). Все асинхронные операции делятся на две основные категории: макрозадачи (macrotasks) и микрозадачи (microtasks). Обработчики событий, включая onclick, oninput, onload и другие, попадают именно в очередь макрозадач.

Как это работает

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

• Макрозадачи: события (click, keydown), setTimeout, setInterval, I/O, requestAnimationFrame (в некоторых реализациях).
• Микрозадачи: Promise.then/catch/finally, queueMicrotask, MutationObserver.

Пример порядка выполнения

console.log('1');

setTimeout(() => console.log('2'), 0);

Promise.resolve().then(() => console.log('3'));

button.addEventListener('click', () => console.log('4'));

console.log('5');

// Если кликнуть после загрузки:
// Синхронно: 1, 5
// Микрозадачи: 3
// Макрозадачи: 2, затем 4 (при клике)

Важно: обработчик onclick не выполнится, пока не завершится текущий синхронный код и все микрозадачи. Если внутри обработчика создать промис, его колбэк выполнится до следующей макрозадачи, но после самого обработчика.

Практическое значение

Понимание очереди помогает избегать неожиданного порядка выполнения, например, когда код в setTimeout срабатывает позже, чем промис, хотя задержка равна нулю. Также это важно при отладке и оптимизации UI: тяжёлые синхронные вычисления в обработчике блокируют отрисовку и другие события.

Итог: обработчики событий вроде onclick относятся к очереди макрозадач, поэтому они выполняются после текущего синхронного кода и всех микрозадач, что нужно учитывать при проектировании асинхронной логики.