Как правильно перехватывать события ухода пользователя со страницы?

Question

[Ilya Olovyannikov]

Как правильно перехватить события, когда пользователь покидает страницу?
Как рисовать "кастомные" алерты вместо системных о том, что данные могут не сохраниться?
Есть какие-то best practices по этому поводу?

На скриншоте - Google календарь, который при создании события и нажатии кнопки "назад" рисует модалку с предупреждением. Как такое делается правильно?

Answer 1

[Михаил Р.]

beforeunload event

Answer 2

[cryptodust]

Ответ на первый вопрос:

window.addEventListener('beforeunload', function(event) {
    event.preventDefault();  // для того чтобы браузер показал пользователю сообщение
});

Насчет второго вопросов думаю много вариантов(создать div который будет отображаться по событию например).

Answer 3

[Николай Санников]

Выше уже написали, как перехватывать события, я добавлю только, что если хочешь вместо стандартного alert выводить свое предупреждение, то используй библиотеки или фреймворки, типа material tailwind css например, намного проще, чем писать свои стили, быстро подключить и настроить.