javascript - beforeunload 或 onbeforeunload

Question

我一直在思考应该使用哪一个: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它指出:

You can and should handle this event through window.addEventListener() and the beforeunload event. More documentation is available there.¹

这让我认为我应该使用后者。然而 removeEventHandler 的文档说的是:

addEventListener() and removeEventListener() are not present in older browsers. You can work around this by inserting the following code at the beginning of your scripts, allowing use of addEventListener() and removeEventListener() in implementations which do not natively support it.²

有人可以解释一下这些之间的差异以及最好使用的吗？

<小时/>

¹ _{https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload#Notes ² https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener#Polyfill_to_support_older_browsers}

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