I'm curious which event is fired first when using jQuery and jQuery Mobile.
Oddly enough, the first console output I get is pagebeforecreate
then document ready
and then onload
.
I would like to know if any other events are being fired before these ones.
http://jsfiddle.net/yYGYe/2/
$('html').bind('pagebeforecreate',function(event) {
console.log("pagebeforecreate");
});
$(document).ready(function() {
console.log("document ready");
});
window.onload = function(){
console.log("onload");
};
The load event is fired when the whole page has loaded, including all dependent resources such as stylesheets and images. This is in contrast to DOMContentLoaded , which is fired as soon as the page DOM has been loaded, without waiting for resources to finish loading.
HTML DOM events allow JavaScript to register different event handlers on elements in an HTML document. Events are normally used in combination with functions, and the function will not be executed before the event occurs (such as when a user clicks a button).
Open Google Chrome and press F12 to open Dev Tools. Go to Event Listener Breakpoints, on the right: Click on the events and interact with the target element. If the event will fire, then you will get a breakpoint in the debugger.
If you're looking to invoke an event handler before onload , DOMContentLoaded is one event that usually fires before.
What you're looking for is a comprehensive visualisation of the jQuery mobile event model lifecycle, this diagram below is available in Pro jQuery Mobile and on the author's blog:
Please remember that this is jQuery mobile specific. The list of native events is available as part of the W3 spec, and the only one relevant to the document lifecycle is good old load
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With