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的文档.在Notesonbeforeunload部分下,它指出:

您可以并且应该通过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);
    }
}