javascript - beforeunload或onbeforeunload

我一直在努力确定应该使用其中之一:beforeunload或onbeforeunload它们似乎都在做非常相似的事情，但是浏览器的兼容性不同。

一些上下文:

我有一个表格。在页面加载时，我序列化表单并将其保存在变量中。如果用户离开页面，我将序列化表格并比较两者，以查看是否有任何更改。但是，如果提交了表单，则不应触发该事件。

示例1

我的工作正常。我只是不了解两者之间的区别:

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

使用此行停止在保存表单时触发(绑定(bind)到.submit())

window.onbeforeunload = null;

示例2

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

使用此行停止在保存表单时触发(绑定(bind)到.submit())

window.removeEventListener("beforeunload");

文档怎么说

我已经阅读了onbeforeunload和beforeunload的文档。
在onbeforeunload部分Notes下指出:



这使我认为应该使用后一个。但是removeEventHandler的文档说:



有人能说明一下这些差异以及最佳的使用方式吗？

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

最佳答案

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);
    }
}

关于javascript - beforeunload或onbeforeunload，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20001125/