← Back to jQuery Course | Chapter 3: Events | Lesson 6 of 11

Window and Document Events

The load event runs after the page resources have loaded.

In this page:

  1. Window Load
  2. Window Resize
  3. Window Scroll
  4. Document Ready
  5. Document Events
Syntax
javascript 
$(window).resize(handler);
$(window).scroll(handler);
$(document).ready(handler);

Window Load

Binding to the window's load event lets you run code only after every image, script, and stylesheet has fully finished loading. This makes it slower to fire than document ready, but safer when your code depends on image dimensions or external resources.

Example: Window Load

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
  </style>
</head>
<body>
  <button id="resetBtn">Reset</button>
  <div id="output"></div>
  <script>

    function init() {
      $(window).on("load", function() {
        $("#output").append($("<div>").text("All resources fully loaded"));
      });
    }
    init();

    $("#resetBtn").click(function() {
      $(document).off();
      $(window).off();
      $("#output").empty();
      init();
    });
  </script>
</body>
</html>

Window Resize

The resize event fires every time the browser window's dimensions change, which is commonly used to recalculate layout-dependent values like a canvas size or a responsive breakpoint.

Example: Window Resize

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
  </style>
</head>
<body>
  <button id="resetBtn">Reset</button>
  <div id="output"></div>
  <script>

    function init() {
      $(window).on("resize", function() {
        $("#output").append($("<div>").text("Width: " + $(window).width()));
      });
    }
    init();

    $("#resetBtn").click(function() {
      $(document).off();
      $(window).off();
      $("#output").empty();
      init();
    });
  </script>
</body>
</html>

Window Scroll

The scroll event fires continuously as the user scrolls the page, often used to implement sticky headers, infinite-loading lists, or 'back to top' buttons that appear past a certain scroll position.

Example: Window Scroll

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <div style="height:2000px">Scroll down</div>

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();

    function init() {
      $(window).on("scroll", function() {
        $("#output").append($("<div>").text("Scroll top: " + $(window).scrollTop()));
      });
    }
    init();

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $(document).off();
      $(window).off();
      $("#output").empty();
      init();
    });
  </script>
</body>
</html>

Document Ready

Document ready runs when the HTML document's structure is fully parsed, which happens much earlier than the window's load event since it doesn't wait for images or external resources to finish downloading.

Example: Document Ready

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <div id="output"></div>
  <script>

    $("#runBtn").click(function() {
      $("#output").text("DOM structure is ready");
    });

    $("#resetBtn").click(function() {
      $("#output").empty();
    });
  </script>
</body>
</html>

Document Events

Binding events at the document level, rather than to individual elements, lets a single handler catch events bubbling up from anywhere on the page -- the foundation of the event delegation pattern.

Example: Document Events

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <button class="item">Click me</button>

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();

    function init() {
      $(document).on("click", ".item", function() {
        $("#output").append($("<div>").text("Caught bubbled click"));
      });
    }
    init();

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $(document).off();
      $(window).off();
      $("#output").empty();
      init();
    });
  </script>
</body>
</html>
Related Topics

Document Ready Event · Form Events · Keyboard Events · Mouse Events

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Using $(window).on("load", ...) when only the DOM is needed, which waits for every image and so runs much later than document ready.
  2. Running heavy code inside resize or scroll handlers, which fire many times per second and make the page sluggish.
  3. Confusing $(document).ready with the load event and expecting images to be finished loading when ready fires.
🔒

Chapter Quiz — Complete all 11 topics to unlock

0/11 topics done

Complete these topics first:

← Previous Lesson Form Events Next Lesson → The jQuery Event Object

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.