Sans préavis ou surchargé

Je suis coincé sur l'un de ces que je devrais utiliser: avant- onbeforeunload ou onbeforeunload Les deux semblent faire des choses très similaires, mais avec une compatibilité différente avec le navigateur.

Quelque contexte :

J'ai un formulaire. En charge de la page, je sérialise le formulaire et l'enregistre dans une variable. Si l'utilisateur quitte la page, je sérialise le formulaire et compare les deux, pour voir s'il y a eu des changements. Cependant, si le formulaire est soumis, l'événement ne devrait pas être déclenché.

Exemple 1

Je travaille comme prévu. Je ne comprends pas les différences entre les deux:

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

Avec cette ligne pour arrêter le tir lorsque vous enregistrez le formulaire (lié à .submit() )

 window.onbeforeunload = null;

Exemple 2

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

Avec cette ligne pour arrêter le tir lorsque vous enregistrez le formulaire (lié à .submit() )

 window.removeEventListener("beforeunload");

Ce que dit la documentation

J'ai lu la documentation pour la surcharge annuelle et avant la charge. En vertu de la onbeforeunload il indique

Vous pouvez et devez gérer cet événement via window.addEventListener () et l'événement beforeunload. Plus de documentation y est disponible.

Ce qui me fait penser que je devrais utiliser ce dernier . Cependant, la documentation pour removeEventHandler indique ceci:

AddEventListener () et removeEventListener () ne sont pas présents dans les anciens navigateurs. Vous pouvez contourner cela en insérant le code suivant au début de vos scripts, ce qui permet d'utiliser addEventListener () et removeEventListener () dans les implémentations qui ne le supportent pas de façon native.

Quelqu'un pourrait-il donner un peu de lumière sur les différences pour ces s'il vous plaît, et le meilleur à utiliser?

window.onbeforeunload = function () {/**/} remplacera tous les gestionnaires existants et le remplacera par le vôtre.

window.addEventListener("beforeunload", function () {/**/}); Ajoutera un nouveau gestionnaire.

addEventListener est très préféré. Dans les anciens navigateurs (c'est-à-dire: IE6 peut-être IE7), vous pouvez utiliser attachEvent .

Vous verrez généralement un code comme:

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