Window और Document Events
In this page:
$(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
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
$(window).on("load", function() {
console.log("All resources fully loaded");
});
</script>
</body>
</html>Window Resize
resize event हर बार तब fire होता है जब browser window के dimensions बदलते हैं, जो आमतौर पर layout-dependent values जैसे canvas size या responsive breakpoint को दोबारा calculate करने के लिए इस्तेमाल होता है।
उदाहरण: Window Resize
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
$(window).on("resize", function() {
console.log("Width:", $(window).width());
});
</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
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div style="height:2000px">Scroll down</div>
<script>
$(window).on("scroll", function() {
console.log("Scroll top:", $(window).scrollTop());
});
</script>
</body>
</html>Document Ready
Document ready तब चलता है जब HTML document की structure पूरी तरह parse हो जाती है, जो window के load event से कहीं पहले होता है क्योंकि यह images या external resources के download पूरा होने का इंतज़ार नहीं करता।
उदाहरण: Document Ready
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
console.log("DOM structure is ready");
});
</script>
</body>
</html>Document Events
individual elements के बजाय document level पर events bind करना एक single handler को page पर कहीं से भी bubble होने वाले events पकड़ने देता है -- event delegation pattern का आधार।
उदाहरण: Document Events
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<button class="item">Click me</button>
<script>
$(document).on("click", ".item", function() {
console.log("Caught bubbled click");
});
</script>
</body>
</html>- सिर्फ DOM की ज़रूरत होने पर
$(window).on("load", ...)इस्तेमाल करना, जो हर image के लिए wait करता है और इसलिए document ready से कहीं बाद में चलता है। resizeयाscrollhandlers के अंदर भारी code चलाना, जो प्रति second कई बार fire होते हैं और page को sluggish बना देते हैं।$(document).readyकोloadevent के साथ confuse करना और ready fire होने पर images के load पूरा होने की उम्मीद करना।
Chapter Quiz — Complete all 11 topics to unlock
0/11 topics done
Complete these topics first: