Beforeunload or onbeforeunload

Я застрял в разработке, какой из них я должен использовать: beforeunload или onbeforeunload Они оба, похоже, делают очень похожие вещи, но с разной совместимостью с браузером.

Некоторый контекст:

У меня есть форма. При загрузке страницы я сериализую форму и сохраняю ее в переменной. Если пользователь покидает страницу, я сериализую форму и сравниваю ее, чтобы увидеть, были ли какие-либо изменения. Однако, если форма отправлена, событие не должно запускаться.

Пример 1

Я работаю так, как ожидалось. Я просто не понимаю различий между ними:

window.onbeforeunload = function(e) {
    if(strOnloadForm != strUnloadForm)
        return "You have unsaved changes.";
}

С помощью этой строки, чтобы остановить ее, когда вы сохраняете форму (привязанный к .submit())

window.onbeforeunload = null;

Пример 2

window.addEventListener("beforeunload", function( event ) {
    if(strOnloadForm != strUnloadForm)
        event.returnValue = "You have unsaved changes.";
});

С помощью этой строки, чтобы остановить ее, когда вы сохраняете форму (привязанный к .submit())

window.removeEventListener("beforeunload");

Что говорится в документации

Я прочитал документацию для onbeforeunload и beforeunload. В разделе onbeforeunload Примечания в нем указано:

Вы можете и должны обрабатывать это событие через window.addEventListener() и beforeunload. Там есть дополнительная документация. 1

Что заставляет меня думать, что я должен использовать последний. Однако в документации для removeEventHandler сказано следующее:

addEventListener() и removeEventListener() отсутствуют в старых браузерах. Вы можете обойти это, вставив следующий код в начале ваших сценариев, разрешив использовать addEventListener() и removeEventListener() в реализациях, которые его не поддерживают. 2

Может ли кто-нибудь пролить свет на различия для них, пожалуйста, и лучший из них?


1https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload#Notes 2https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener#Polyfill_to_support_older_browsers

Ответ 1

window.onbeforeunload = function () {/**/} будет переопределять любые существующие обработчики и заменить его на свой.

window.addEventListener("beforeunload", function () {/**/}); добавит новый обработчик.

addEventListener является более предпочтительным. В старых браузерах (то есть IE6, возможно, IE7) вы можете использовать attachEvent.

Обычно вы увидите код:

function addEvent(object, event_type, event_handler) {
    if (object.addEventListener) {
        object.addEventListener(event_type, event_handler, false);
    } else {
        object.attachEvent("on" + event_type, handler);
    }
}