为何JS/jQuery DOM事件仅在$(document).ready或window.onload中生效？

Great question! The core issue here boils down to the order in which browsers load and parse your page content. Let’s break this down clearly:

The Root Cause: DOM Loading Order #

When you place your JavaScript file in the <head> tag, the browser executes that script immediately as it parses the HTML top-to-bottom. At this point, the rest of your page (including elements like #switcher-large and #content) hasn’t been rendered yet—they don’t exist in the Document Object Model (DOM) yet.

What Happens With Non-Working Code #

When your script runs in the <head> without waiting for the DOM:

• In vanilla JS: document.getElementById('switcher-large') returns null because the element hasn’t been created. Trying to set onclick on null either does nothing or throws an error.
• In jQuery: $('#switcher-large') selects an empty collection. Attaching a click event to an empty set has no effect, since there’s no element to listen to.

Here’s what that looks like under the hood:

// Runs before #switcher-large exists in the DOM
$('#switcher-large').on('click', function(){ $('#content').addClass('large'); }); // No element to attach to
var docId = document.getElementById('switcher-large'); // docId = null
docId.onclick = function(){ ... }; // Fails silently or throws "Cannot set property 'onclick' of null"

Why the Working Code Fixes It #

$(document).ready() (jQuery) #

This function waits until the entire DOM is fully constructed—meaning all HTML elements have been parsed and added to the DOM tree—before running the code inside. It doesn’t wait for images or stylesheets to finish loading, so it’s faster than window.onload. When your click listener runs here, #switcher-large and #content are definitely present.

window.onload (Vanilla JS) #

This event fires after all page resources (images, stylesheets, scripts, etc.) have finished loading. While this also ensures your elements exist, it waits longer than necessary for resources that don’t affect the DOM structure. For simple DOM manipulation, $(document).ready() (or vanilla JS alternatives like DOMContentLoaded) is more efficient.

Alternatives to ready()/onload #

If you don’t want to wrap your code in these functions, here are two common fixes:

1. Move your script to the end of the <body>
   Place your <script> tag right before the closing </body> tag. The browser will parse all your HTML elements first, so when the script runs, the elements you need are already in the DOM:

   <body>
     <!-- All your HTML content here -->
     <script src="your-script.js"></script>
   </body>
   

2. Use event delegation
   For dynamic elements (or if you want to keep the script in the <head>), attach the event listener to a parent element that exists when the script runs (like document). This works because events bubble up the DOM tree:

   // jQuery delegation
   $(document).on('click', '#switcher-large', function(){
     $('#content').addClass('large');
   });
   
   // Vanilla JS delegation
   document.addEventListener('click', function(e){
     if(e.target.id === 'switcher-large'){
       document.getElementById('content').classList.add('large');
     }
   });
   

内容的提问来源于stack exchange，提问作者Sami Kh