beforeunload或onbeforeunload [英] beforeunload Or onbeforeunload

问题描述

我不知道我应该使用哪一个： beforeunload 或 onbeforeunload 他们似乎都做非常相似的事情，但具有不同的浏览器兼容性。

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

某些情境：

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

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.

示例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.";
}

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

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

window.onbeforeunload = null;

示例2

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

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

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

window.removeEventListener("beforeunload");

文档内容

我已阅读 onbeforeunload 和 beforeunload 。
在 onbeforeunload 部分 注释 表明：

I've read the documentation for onbeforeunload and beforeunload. Under the onbeforeunload section Notes it states:

你可以和应该通过 window.addEventListener（）和 beforeunload 事件。这里有更多文档。 ¹

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

这让我觉得我应该使用后者。但是， removeEventHandler 的文档说明了这一点：

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

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

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.²

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

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}

推荐答案

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

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

window.addEventListener（beforeunload，function（）{/ ** /}）; 将添加一个新的处理程序。

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

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

addEventListener is far preferred. In older browsers (that is: IE6 maybe IE7) you can use 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);
    }
}

这篇关于beforeunload或onbeforeunload的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！