เหตุการณ์ PageTransitionEvent ของ DOM เป็นเหตุการณ์ที่เกิดขึ้นเมื่อผู้ใช้นำทางระหว่างเว็บเพจ
คุณสมบัติของออบเจ็กต์ PageTransitionEvent
| คุณสมบัติ | คำอธิบาย |
|---|---|
| persisted | คืนค่า true หรือ false ขึ้นอยู่กับว่าเว็บเพจถูกแคช (cached) หรือไม่ |
ประเภทของเหตุการณ์ที่เป็นของ PageTransitionEvent
| เหตุการณ์ | คำอธิบาย |
|---|---|
| pageHide | เกิดขึ้นเมื่อผู้ใช้นำทางออกจากเว็บเพจ |
| pageShow | เกิดขึ้นเมื่อผู้ใช้นำทางไปยังเว็บเพจ |
ตัวอย่างการใช้งาน
ตัวอย่างด้านล่างแสดงการใช้งานออบเจ็กต์ PageTransitionEvent
<!DOCTYPE html> <html> <head> <style> body{ text-align:center; color:#fff; background: #ff7f5094; height:100%; } .btn{ background:#0197F6; border:none; height:2rem; border-radius:2px; width:35%; margin:2rem auto; display:block; color:#fff; outline:none; cursor:pointer; } </style> </head> <body> <h1>สาธิตเหตุการณ์ DOM PageTransitionEvent</h1> <button onclick="checkPage(event)" class="btn">คลิกฉัน</button> <script> function checkPage(event) { if (event.persisted) { confirm("หน้านี้ถูกแคชโดยเบราว์เซอร์"); } else { confirm("หน้านี้ไม่ได้ถูกแคชโดยเบราว์เซอร์"); } } </script> </body> </html>
ผลลัพธ์
โค้ดด้านบนจะให้ผลลัพธ์ดังนี้
คลิกที่ปุ่ม "คลิกฉัน" เพื่อทราบว่าหน้านี้ถูกแคชโดยเบราว์เซอร์หรือไม่
