I use JSFiddle for editing my code. However, in certain codes when I'm running JavaScript or jQuery, it doesn't work unless I select "No wrap - <head>
" or "No wrap - <body>
".
In the fiddle above, you will notice that clicking the <button>
element will not alert()
you unless you've selected either the extension "No wrap - <head>
" or "No wrap - <body>
".
I'm a curious person who likes to understand how things work. What exactly does that option change, and why would you change it?
The onload event occurs when an object has been loaded. onload is most often used within the <body> element to execute a script once a web page has completely loaded all content (including images, script files, CSS files, etc.).
$( document ).ready() jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.
The load event is a general “loading complete” signal. It is supported by many elements. For example, external SCRIPTand IMG, IFRAME trigger it when downloading of their content finishes.
The DOMContentLoaded event triggers on document when the page is ready. It waits for the full HTML and scripts, and then triggers.All browsers except IE<9 support it.
onLoad:
onLoad
window event. This runs when the entire page has loaded (such as images).onDomReady:
onDomReady
window event. This runs when the DOM has loaded.no wrap - in <head>
:
<head>
sectionno wrap - in <body>
:
<body>
section I would like to note that more information can be found in jsFiddle's documentation.
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