The simple difference between document ready and page event in jQuery-mobile is that:
The document ready event is used for the whole HTML page,
$(document).ready(function(e) {
// Your code
});
When there is a page event, use for handling particular page event:
<div data-role="page" id="second">
<div data-role="header">
<h3>
Page header
</h3>
</div>
<div data-role="content">
Page content
</div> <!--content-->
<div data-role="footer">
Page footer
</div> <!--footer-->
</div><!--page-->
You can also use document for handling the pageinit event:
$(document).on('pageinit', "#mypage", function() {
});