JS JavaScript · 25 вопросов · ~70 мин · ⏱ Таймер 10:00 · Средний ·

События в браузере

Тест проверяет распространение событий, делегирование, различия target и currentTarget, отмену стандартного действия и устойчивое управление подписками. Здесь недостаточно помнить названия методов: нужно предсказать точный маршрут события и выбрать решение, которое не сломается после изменения разметки.

Отвечено: 0 из 25

⏱ --:--

💡 Инструкция: Выберите один ответ из пяти. В тесте 25 вопросов и 70 минут; код лучше читать построчно, не полагаясь на первое впечатление. После завершения откроются общий процент, 5 тематических шкал и объяснение каждого решения.

Вопрос 1 из 25

В каком порядке выведутся обработчики при клике по button?

outer.addEventListener("click", () => console.log("outer bubble"));
outer.addEventListener("click", () => console.log("outer capture"), true);
button.addEventListener("click", () => console.log("button"));

outer bubble, button, outer capture outer capture, button, outer bubble outer capture, outer bubble, button Порядок между тремя обработчиками не определён button, outer capture, outer bubble

Вопрос 2 из 25

Что изменит stopPropagation в первом обработчике кнопки?

button.addEventListener("click", e => {
  console.log("first");
  e.stopPropagation();
});
button.addEventListener("click", () => console.log("second"));
document.addEventListener("click", () => console.log("document"));

Снимет все обработчики click с текущего элемента Отменит стандартное действие, но сохранит весь путь распространения Остановит путь к предкам, но не второй handler той же кнопки Повторно отправит то же событие с уровня document Остановит и второй handler, зарегистрированный на этой кнопке

Вопрос 3 из 25

Какой вывод даст stopImmediatePropagation?

button.addEventListener("click", e => {
  console.log("A");
  e.stopImmediatePropagation();
});
button.addEventListener("click", () => console.log("B"));
document.addEventListener("click", () => console.log("D"));

A, D B, D A, B A, B, D A

Вопрос 4 из 25

Событие focus не всплывает. Как слушать фокусировку полей на общем контейнере?

Использовать focus в bubble без изменений Слушать только window.load Вызывать preventDefault у каждого поля Заменить focus на click Использовать focusin либо capture-обработчик focus

Вопрос 5 из 25

Почему бездумный stopPropagation внутри виджета может стать архитектурной проблемой?

stopPropagation допустим только для событий, созданных браузером Свойство target меняется на window при выходе из компонента Законные listeners родителей и аналитики перестают получать событие После вызова событие перестаёт считаться cancelable Браузер выполняет стандартное действие до передачи события предкам

Вопрос 6 из 25

Почему этот обработчик не всегда находит действие при клике по значку внутри кнопки?

toolbar.addEventListener("click", event => {
  const action = event.target.dataset.action;
  run(action);
});

currentTarget всегда равен значку dataset читает data-атрибуты у currentTarget, но не у фактической цели клика event.target может быть вложенным svg или span без data-action data-action доступен только через getAttributeNS click не всплывает

Вопрос 7 из 25

Какой вариант устойчив к клику по вложенному элементу и не принимает кнопку из чужого вложенного списка?

list.addEventListener("click", event => {
  // Как получить кнопку текущего списка?
});

Определять кнопку через relatedTarget, откуда пришёл указатель Искать data-action от target и проверить принадлежность текущему list Искать button от currentTarget и не проверять границы вложенного списка Использовать сам target, предполагая, что вложенных элементов нет Брать первую кнопку документа независимо от места события

Вопрос 8 из 25

Будет ли делегирование работать для строки, добавленной после установки обработчика?

table.addEventListener("click", handleRowAction);
table.append(createRow(newItem));

Нет, обработчик запоминает старых потомков Только если строка создана через innerHTML Нет, динамические узлы не создают событий Да, событие новой строки всплывёт к уже подписанному контейнеру Только после повторного addEventListener

Вопрос 9 из 25

Для какого события простое делегирование через всплытие не сработает так же, как для click?

input pointerdown mouseenter change keydown

Вопрос 10 из 25

Когда отдельные обработчики на элементах разумнее одного делегированного?

Никогда: единый listener на контейнере всегда проще сопровождать Когда target совпадает с currentTarget для каждого возможного клика Когда кнопки не содержат текста и не имеют вложенных элементов Когда элементов мало и их lifecycle надёжно снимает подписки Всегда: всплытие само по себе создаёт заметную задержку интерфейса

Вопрос 11 из 25

Что выведет код при клике по span внутри button?

const button = document.querySelector("button");
button.addEventListener("click", event => {
  console.log(event.target.tagName, event.currentTarget.tagName);
});

BUTTON, BUTTON BUTTON, SPAN SPAN, SPAN document, BUTTON SPAN, BUTTON

Вопрос 12 из 25

Как надёжнее обработать сочетание Ctrl/Command+S на разных настольных системах?

window.addEventListener("keydown", event => {
  // Когда вызвать saveDocument()?
});

Проверять только keyCode === 83 Проверять event.which и button Проверять event.key === "s" и (event.ctrlKey || event.metaKey) Слушать только событие input Проверять event.code === "KeyS" без модификаторов

Вопрос 13 из 25

Как отличить реальный выход указателя из карточки от перехода на её дочерний элемент при mouseout?

card.addEventListener("mouseout", event => {
  if (card.contains(event.relatedTarget)) return;
  closePreview();
});

Сравнить clientX с pageX Проверить event.defaultPrevented Проверить event.isTrusted всегда Проверить, содержит ли карточка event.relatedTarget Вызвать stopImmediatePropagation

Вопрос 14 из 25

Что показывает event.composedPath() в компоненте с Shadow DOM?

Цепочку только внутри открытого теневого дерева Список узлов, на которых обработчик уже выполнился Список зарегистрированных обработчиков на маршруте Пару target и currentTarget без промежуточных узлов Полный маршрут события с учётом границ Shadow DOM

Вопрос 15 из 25

Почему event.isTrusted нельзя превращать в единственную проверку права на опасное действие?

isTrusted меняет фазу распространения события после первой проверки Это лишь признак источника; право должен проверять сервер isTrusted подтверждает, что событие прошло стандартный путь распространения в документе Синтетические и пользовательские события всегда имеют false Свойство определено только для submit и отсутствует у click

Вопрос 16 из 25

Почему preventDefault не отменит прокрутку в passive-обработчике?

window.addEventListener("touchmove", event => {
  event.preventDefault();
}, { passive: true });

passive переносит handler в Worker, где нет объекта события Вместо preventDefault нужно остановить всплытие события passive-подписка обещает не отменять стандартное действие Прокрутка не относится к стандартным действиям браузера preventDefault работает только для событий click и submit

Вопрос 17 из 25

Что делает preventDefault у click по ссылке, если событие cancelable?

link.addEventListener("click", event => {
  event.preventDefault();
  openInPanel(link.href);
});

Закроет текущую вкладку как стандартное действие ссылки Заменит target события на сам элемент ссылки перед всплытием Удалит атрибут href у ссылки до завершения обработчиков Остановит дальнейшие handlers на предках, но оставит переход Отменит переход по href, не прекращая распространение события

Вопрос 18 из 25

Какой способ программной отправки формы запускает обычную проверку ограничений и submit-событие?

form.submit() button.focus() form.reset() form.requestSubmit() form.dispatchEvent(new Event("click"))

Вопрос 19 из 25

Когда отмена submit на клиенте оправдана?

Всегда, чтобы форма принципиально не работала без JavaScript Когда сервер ответил 200 на предыдущую отправку этой формы Когда код сам отправляет данные и умеет восстановиться после ошибки Когда нужно скрыть встроенные сообщения браузерной валидации Только для формы с одним обязательным полем ввода

Вопрос 20 из 25

Что означает event.defaultPrevented в обработчике родителя?

Событие создано программно Какой-то предыдущий обработчик отменил стандартное действие Событие остановлено и родитель не должен был его получить Обработчик зарегистрирован с once Цель уже удалена из DOM

Вопрос 21 из 25

Почему removeEventListener здесь не снимает подписку?

button.addEventListener("click", () => save());
button.removeEventListener("click", () => save());

Нужно вызвать preventDefault Функция должна быть async Нельзя снимать click Передана новая функция, а не тот же объект обработчика removeEventListener работает только на document

Вопрос 22 из 25

Что даст опция once: true?

button.addEventListener("click", confirmOnce, { once: true });

Стандартное действие отменится после первого раза В один момент разрешён только один click Событие всплывёт только на один уровень Обработчик выполнится один раз и будет автоматически снят Callback выполнится синхронно при регистрации

Вопрос 23 из 25

Как одним действием снять несколько обработчиков компонента?

const controller = new AbortController();
button.addEventListener("click", onClick, { signal: controller.signal });
window.addEventListener("resize", onResize, { signal: controller.signal });
// cleanup: controller.abort();

Удалить element.id Вызвать stopPropagation на последнем событии Передать общий AbortSignal и вызвать controller.abort() Очистить innerHTML документа Назначить всем обработчикам once: false

Вопрос 24 из 25

После каждого открытия диалога кнопка срабатывает на один раз больше. Наиболее вероятная причина?

Число CSS-классов кнопки увеличивает количество вызовов handler Браузер повторяет последний click из собственного кэша событий Каждое событие submit автоматически создаёт дополнительный click Монтаж добавляет listener снова, а закрытие не выполняет cleanup preventDefault повторно отправляет событие после завершения handler

Вопрос 25 из 25

Как лучше проверить обработчик клавиатурной команды?

Добавить произвольный setTimeout и наблюдать результат вручную Создать KeyboardEvent, проверить эффект и отдельно доступность Проверить только визуальный цвет кнопки после нажатия мышью Вызвать handler без события и подставить key глобальной переменной Сравнить длину функции с версией до добавления команды

Ответьте на все 25 вопросов, чтобы получить результат

🔗 Встроить тест на свой сайт (iframe) ▼

Скопируйте код и вставьте в любое место на вашем сайте:

Также доступна прямая ссылка на embed-страницу