web-dev-qa-db-ja.com

beforeunloadまたはonbeforeunload

どちらを使用すればよいかわからなくなった：beforeunloadまたはonbeforeunloadどちらも非常によく似ているようですが、ブラウザの互換性が異なります。

一部のコンテキスト：

フォームがあります。ページの読み込み時に、フォームをシリアル化して変数に保存します。ユーザーがページを離れた場合は、フォームをシリアル化して2つを比較し、変更があったかどうかを確認します。ただし、フォームが送信された場合、イベントは発生しません。

例1

これは期待どおりに機能しています。 2つの違いを理解できません。

_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 とあります：

canおよびshouldwindow.addEventListener（） および beforeunload イベントを通じてこのイベントを処理します。その他のドキュメントが利用可能です。1

これは私に私を考えさせます後者を使用する必要があります。ただし、 removeEventHandler のドキュメントには次のように記載されています：

addEventListener()およびremoveEventListener()は、古いブラウザには存在しません。これを回避するには、スクリプトの先頭に次のコードを挿入し、ネイティブでサポートしていない実装でaddEventListener()およびremoveEventListener()を使用できるようにします。2

誰かがこれらの違いのいくつかに光を当ててください、そして使用するのに最適なものはありますか？

1https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload#Notes2https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener#Polyfill_to_support_older_browsers

javascriptdom-eventsonbeforeunload
21
Adam Tomat

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