javascript beforeunload 或 onbeforeunload

beforeunload Or onbeforeunload

提问by Adam Tomat

I'm stuck working out which one of these I should be using: beforeunloador onbeforeunloadThey both seem to be doing very similar things, but with different browser compatibility.

我一直在想我应该使用其中的哪一个：beforeunload或者onbeforeunload它们似乎都在做非常相似的事情，但浏览器兼容性不同。

Some context:

一些背景：

I have a form. On page load I serialise the form and save it in a variable. If the user leaves the page I serialise the form and compare the two, to see if there's been any changes. However, if the form is submitted then the event should not be fired.

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

Example 1

示例 1

I have this working as expected. I just don't understand the differences between the two:

我有这个按预期工作。我只是不明白两者之间的区别：

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

With this line to stop it firing when you save the form (bound to .submit())

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

window.onbeforeunload = null;

Example 2

示例 2

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

With this line to stop it firing when you save the form (bound to .submit())

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

window.removeEventListener("beforeunload");

What the documentation says

文档说明了什么

I've read the documentation for onbeforeunloadand beforeunload. Under the onbeforeunloadsection Notesit states:

我已经阅读了onbeforeunload和beforeunload的文档。在注释onbeforeunload部分下，它指出：

You canand shouldhandle this event through window.addEventListener()and the beforeunloadevent. More documentation is available there.¹

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

Which makes me think I should be using the latter. However the documentation for removeEventHandlersays this:

这让我觉得我应该使用后者。但是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.²

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

Could somebody please shed some light on the differences for these please, and the best one to use?

有人可以解释一下这些的区别吗，最好的一个？

---

---

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

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

回答by Halcyon

window.onbeforeunload = function () {/**/}will override any existing handlers and replace it with your own.

window.onbeforeunload = function () {/**/}将覆盖任何现有的处理程序并将其替换为您自己的。

window.addEventListener("beforeunload", function () {/**/});will add a new handler.

window.addEventListener("beforeunload", function () {/**/});将添加一个新的处理程序。

addEventListeneris far preferred. In older browsers (that is: IE6 maybe IE7) you can use attachEvent.

addEventListener是首选。在较旧的浏览器（即：IE6 或 IE7）中，您可以使用attachEvent.

You'll commonly see code like:

您通常会看到如下代码：

function addEvent(object, event_type, event_handler) {
    if (object.addEventListener) {
        object.addEventListener(event_type, event_handler, false);
    } else {
        object.attachEvent("on" + event_type, handler);
    }
}