Menu
In most tutorials, there are two ways mentioned about how to execute a jquery script:
window.onload hook.$(document).ready(function(){...}) event (and could be abbreviated to $(function(){...}))And I found that it even works when I omit all them, just place the code in a <script></script> occlusion could achieve the same purpose. Just like this:
<html>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<body>
<button id="btn" name="test" value="clickme">clickme</button>
</body>
<script>
//$(document).ready( function(){
// $('#btn').on("click", function(e){
// alert("hi")
// }
//)})
$('#btn').on('click', function(e){
alert('hi')
})
</script>
</html>
As you can see both the un-commented code (which omit all the document.ready staff or a window.onload) and the commented code can give me a alert as expected.
So my question is, in such cases(binding events), since I can write code more elegant as the un-commented snippet. Why should I bother to write the code as in most tutorials told (which is as the commented style above) ?
695
<script> tags in your HTML that do not have the defer or async attributes will execute in the order the HTML document is parsed from top down. That means that a script near the top of the document will execute before the rest of the document has been parsed and thus before it is available. This makes the placement of a script or the execution timing of a script relevant in many cases.
In controlling this execution timing, you have at least five choices for executing startup scripts:
You can put the script in the <head> section or the top of the <body> section and execute it as it loads. This has the disadvantage that the DOM is not yet loaded so you can't operate on elements within the page.
You can insert the script right before the </body> tag and all of the DOM will be loaded and your script will be able to access everything.
You can insert your script anywhere you want (including in the <head> tag) and use $(document).ready(fn) to not execute the fn until the DOM is ready. Internally, jQuery listens for the DOMContentLoaded event and when it fires, it executes any .ready() handlers.
You can insert your script anywhere you want (including in the <head> tag) and use window.onload(fn) to not execute the fn until the DOM is ready and all external resources such as images have loaded. Note, you can also use the jQuery version $(window).load(fn).
You can use the async or defer attributes on the script tag to force it to load asynchronously and somewhat later. This will create an indeterminate time of script execution (though always later than if it was just inline) so you will likely need some specific control like $(document).ready() to know that the DOM is safe before your script executes. You can see these other questions/answers Script Tag - async & defer and Load and Execute order of scripts for a lot more details on the operation of the async and defer attributes.
So, if you carefully place your script tag in the right place or your startup script does not try to access DOM elements, you don't need to use either $(document).ready(fn) or window.onload(fn).
But, if you don't entirely control where the script is placed and you need to access DOM elements or you want your script to be able to be placed anywhere and still have it do the right thing or if you just want all your scripts in the <head> tag, then you will need to delay the execution of your script until the DOM is ready and either $(document).ready(fn) or window.onload(fn) will make it easy to do so.
91
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
