beforeunload 或 onbeforeunload

Question

我不知道应该使用哪一个：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 部分Notes 下它声明：

您可以并且应该通过window.addEventListener() 和beforeunload 事件处理此事件。那里提供了更多文档。¹

这让我觉得我应该使用后者。但是removeEventHandler 的文档是这样说的：

addEventListener() 和 removeEventListener() 在旧版浏览器中不存在。您可以通过在脚本开头插入以下代码来解决此问题，允许在本身不支持它的实现中使用 addEventListener() 和 removeEventListener()。²

有人能说明一下这些的区别，以及最好的使用方法吗？

---

¹_{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);
    }
}