Revision 768785 of BeforeUnloadEvent

<p>The <code>beforeunload</code> event is fired when the window, the document and its resources are about to be unloaded.</p>

<p>When a non-empty string is assigned to the <code>returnValue</code> Event property, a dialog box appears, asking the users for confirmation to leave the page (see example below). When no value is provided, the event is processed silently.</p>

<h2 id="General_info">General info</h2>

<dl>
 <dt style="float: left; text-align: right; width: 120px;">Specification</dt>
 <dd style="margin: 0 0 0 120px;"><a href="https://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#unloading-documents" title="https://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#unloading-documents">HTML5</a></dd>
 <dt style="float: left; text-align: right; width: 120px;">Interface</dt>
 <dd style="margin: 0 0 0 120px;">Event</dd>
 <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt>
 <dd style="margin: 0 0 0 120px;">No</dd>
 <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt>
 <dd style="margin: 0 0 0 120px;">Yes</dd>
 <dt style="float: left; text-align: right; width: 120px;">Target</dt>
 <dd style="margin: 0 0 0 120px;">defaultView</dd>
 <dt style="float: left; text-align: right; width: 120px;">Default Action</dt>
 <dd style="margin: 0 0 0 120px;">Varies (prompts the user for confirmation to leave the page).</dd>
</dl>

<h2 id="Properties">Properties</h2>

<p>{{OpenEventProperties()}}<span style="line-height: 1.572;">{{EventProperties()}}</span><span style="line-height: 1.572;">{{CloseEventProperties()}}</span></p>

<h2 id="Example">Example</h2>

<pre class="brush:js;">
window.addEventListener("beforeunload", function( event ) {
  event.returnValue = "\o/";
});

//is equivalent to
window.addEventListener("beforeunload", function( event ) {
  event.preventDefault();
});</pre>

<p>Webkit-based browsers don't follow the spec for the dialog box. An almost cross-browser working example would be close to the below example.</p>

<pre class="brush: js">
window.addEventListener("beforeunload", function (e) {
  var confirmationMessage = "\o/";

  (e || window.event).returnValue = confirmationMessage;     //Gecko + IE
  return confirmationMessage;                                //Webkit, Safari, Chrome etc.
});</pre>

<h2 id="Related_Events">Related Events</h2>

<p>{{LoadRelatedEvents()}}</p>

<p>Reference</p>

<ul>
 <li><a href="https://www.whatwg.org/specs/web-apps/current-work/#prompt-to-unload-a-document" title="https://www.whatwg.org/specs/web-apps/current-work/#prompt-to-unload-a-document">Unloading Documents — Prompt to unload a document</a></li>
</ul>