Урок: проверить, можно ли отменить событие

Назначение

PreventDefault действует только на отменяемое событие и при подходящих условиях обработчика. Урок отделяет признак cancelable от факта defaultPrevented на безопасном синтетическом примере.

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

Создайте самостоятельный EventTarget и два события своего типа. Обработчик вызывает preventDefault. Это не имитация настоящего пользовательского действия, а проверка механики отмены без изменения страницы.

Пример

const target = new EventTarget();
target.addEventListener("lesson", event => event.preventDefault());
const fixed = new Event("lesson", {cancelable:false});
const cancelable = new Event("lesson", {cancelable:true});
console.log(target.dispatchEvent(fixed), fixed.defaultPrevented);
console.log(target.dispatchEvent(cancelable), cancelable.defaultPrevented);

Что должно получиться

Для неотменяемого события defaultPrevented остаётся false. Для отменяемого становится true, а dispatchEvent возвращает false, сообщая об отмене обработчиком.

Граница применения и частая ошибка

Отмена действия по умолчанию не прекращает распространение события. В passive-обработчике preventDefault не должен использоваться для отмены. Синтетическое событие не получает автоматически все возможности доверенного пользовательского ввода.

Самостоятельная проверка

Добавьте второй обработчик и убедитесь, что он всё ещё вызывается после preventDefault. Затем сравните с stopPropagation на отдельной DOM-структуре. Не используйте отмену как способ скрыть неизвестную причину ошибки.

Связанные материалы

• Консоль
• Прототип формы
• Повторные проверки