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的文档说明了这一点：

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

有人可以请一些关于这些请求的差异，以及最好用的差异吗？

¹ <子> removeEventHandler ² <子> 2

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

beforeunload或onbeforeunload

1 个答案: