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) ?
<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).
但是，如果您不能完全控制脚本的放置位置并且您需要访问 DOM 元素，或者您希望您的脚本能够放置在任何地方并且仍然让它做正确的事情，或者如果您只想将所有脚本放在的<head>标签，那么你将需要耽误您的脚本的执行，直到DOM已准备就绪，无论是$(document).ready(fn)或window.onload(fn)将可以很容易地做到这一点。