---
title: PageTransitionEvent
slug: Web/API/PageTransitionEvent
translation_of: Web/API/PageTransitionEvent
---
<p>{{APIRef("HTML DOM")}}</p>

<p>Page transition events fire when a webpage is being loaded or unloaded.</p>

<p>当网页在加载完成或卸载后会触发页面传输事件（Page transition events）。</p>

<h2 id="DOM_Information">DOM Information</h2>

<p> </p>

<h3 id="Inheritance_Hierarchy">Inheritance Hierarchy</h3>

<div> Event
<div>   PageTransitionEvent</div>
</div>

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

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;body onpageshow="myFunction(event)"&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>

<h3 id="JavaScript">JavaScript</h3>

<pre class="brush: js">function myFunction(event) {
    if (event.persisted) {
        alert("The page was cached by the browser");
    } else {
        alert("The page was NOT cached by the browser");
    }
}</pre>

<h2 id="Members">Members</h2>

<p>The <strong>PageTransitionEvent</strong> object has these types of members:</p>

<ul>
 <li><a href="#">Properties</a></li>
</ul>

<h3 id="Properties">Properties</h3>

<p>The <strong>PageTransitionEvent</strong> object has these properties.</p>

<table class="members" id="memberListProperties">
 <tbody>
  <tr>
   <th>Property</th>
   <th>Access type</th>
   <th>Description</th>
  </tr>
  <tr>
   <td>
    <p><strong>persisted</strong></p>
   </td>
   <td>只读</td>
   <td>
    <p>标记页面是否从缓存（Backforward Cache）中加载</p>
   </td>
  </tr>
 </tbody>
</table>

<p> </p>