Handling Page Events
The following table lists the events related to pages.
| Event | Description |
|---|---|
| pagebeforecreate | Triggered when the page is being initialized, before most plugin auto-initialization occurs. |
| pagecreate | Triggered when the page has been created in the DOM (for example, through Ajax) but before all UI Components have had an opportunity to enhance the contained markup. |
| pagebeforeshow | Triggered on the page we are transitioning to, before the actual transition animation is kicked off. |
| pageshow | Triggered on the page we are transitioning to, after the transition animation has completed. |
| pagebeforehide | Triggered on the page we are transitioning away from, before the actual transition animation is kicked off. |
| pagehide | Triggered on the page we are transitioning away from, after the transition animation has completed. |
| pagechange | Triggered after the changePage() request has finished loading the page into the DOM and all page transition animations have completed. |
To implement page events, use the following code:
<div id="page" class="ui-page">
<header class="ui-header">
</header>
<div class="ui-content">
</div>
</div>
<script>
var page = document.getElementById("page");
page.addEventListener("Event", function(ev)
{
/* Your code */
});
</script>
To bind an event callback on the Back key, use the following code:
/* JavaScript code */
(function () {
window.addEventListener('tizenhwkey', function(ev) {
if (ev.keyName === "back") {
var page = document.getElementsByClassName("ui-page-active")[0],
pageid = page ? page.id : "";
if ( pageid === "main" ) {
try {
/* Call tizen.application.getCurrentApplication().exit() to exit application */
tizen.application.getCurrentApplication().exit();
} catch (ignore) {
/* Add script to add another behavior */
}
} else {
/* Call window.history.back() to go to previous browser window */
window.history.back();
}
}
});
})();