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

Window और Document Events

load event page resources के load होने के बाद चलता है।

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

window के load event को bind करना आपको सिर्फ हर image, script, और stylesheet के पूरी तरह load होने के बाद code चलाने देता है। यह document ready से चलने में धीमा है, लेकिन तब safer है जब आपके code को image dimensions या external resources पर निर्भर होना हो।

उदाहरण: 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

resize event हर बार तब fire होता है जब browser window के dimensions बदलते हैं, जो आमतौर पर layout-dependent values जैसे canvas size या responsive breakpoint को दोबारा calculate करने के लिए इस्तेमाल होता है।

उदाहरण: 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

scroll event user के page scroll करने पर लगातार fire होता है, अक्सर sticky headers, infinite-loading lists, या किसी specific scroll position के बाद दिखने वाले 'back to top' buttons implement करने के लिए इस्तेमाल होता है।

उदाहरण: 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 तब चलता है जब HTML document की structure पूरी तरह parse हो जाती है, जो window के load event से कहीं पहले होता है क्योंकि यह images या external resources के download पूरा होने का इंतज़ार नहीं करता।

उदाहरण: 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

individual elements के बजाय document level पर events bind करना एक single handler को page पर कहीं से भी bubble होने वाले events पकड़ने देता है -- event delegation pattern का आधार।

उदाहरण: 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 इवेंट · Form इवेंट्स · Keyboard इवेंट्स · Mouse इवेंट्स

{# 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. #}
आम गलतियां
  1. सिर्फ DOM की ज़रूरत होने पर $(window).on("load", ...) इस्तेमाल करना, जो हर image के लिए wait करता है और इसलिए document ready से कहीं बाद में चलता है।
  2. resize या scroll handlers के अंदर भारी code चलाना, जो प्रति second कई बार fire होते हैं और page को sluggish बना देते हैं।
  3. $(document).ready को load event के साथ confuse करना और ready fire होने पर images के load पूरा होने की उम्मीद करना।
🔒

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.