Events को Programmatically Trigger करना
In this page:
$(selector).trigger("eventName");
$(selector).triggerHandler("eventName");Trigger Click
trigger(click) किसी element के click handlers को programmatically fire करता है, बिल्कुल जैसे किसी user ने इसे physically click किया हो। यह आमतौर पर किसी script या test के अंदर से user interaction simulate करने के लिए इस्तेमाल होता है।
उदाहरण: Trigger Click
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<button id="btn">Click</button>
<script>
$("#btn").on("click", function() { console.log("Clicked!"); });
$("#btn").trigger("click");
</script>
</body>
</html>Trigger Change
trigger(change) से एक change event trigger करना तब उपयोगी है जब आपने JavaScript से किसी form control की value update की हो, क्योंकि सीधे .val() set करना automatically वे handlers fire नहीं करता जो एक real user interaction करता।
उदाहरण: Trigger Change
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<input id="name" type="text">
<script>
$("#name").on("change", function() { console.log("Changed to:", $(this).val()); });
$("#name").val("Alice").trigger("change");
</script>
</body>
</html>Custom Events को Trigger करना
trigger() पूरी तरह custom event names के साथ भी काम करता है जो आप खुद invent करते हैं, जैसे trigger('cart:updated'), आपके code के अलग-अलग हिस्सों को एक-दूसरे के functions सीधे call किए बिना communicate करने देते हुए।
उदाहरण: Trigger Custom Events
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
$(document).on("cart:updated", function() {
console.log("Cart was updated");
});
$(document).trigger("cart:updated");
</script>
</body>
</html>Event Data Pass करना
trigger() के दूसरे argument के रूप में एक array pass करना handler को extra data भेजता है, जिसे यह event object के बाद additional arguments के रूप में receive करता है।
उदाहरण: Pass Event Data
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
$(document).on("greet", function(event, name) {
console.log("Hello,", name);
});
$(document).trigger("greet", ["Alice"]);
</script>
</body>
</html>Form Events Trigger करना
Form events को programmatically trigger करना automated tests में खासतौर पर उपयोगी है, जहाँ आप बिना किसी असली user interaction के किसी user के form submit करने या एक box check करने को simulate करना चाहते हैं।
उदाहरण: Trigger Form Events
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<form id="myForm"><input type="checkbox" id="agree"></form>
<script>
$("#agree").on("change", function() { console.log("Checkbox toggled:", $(this).is(":checked")); });
$("#agree").prop("checked", true).trigger("change");
</script>
</body>
</html>- किसी handler के attach होने से पहले
.trigger("click")के काम करने की उम्मीद करना, जबकि handler को पहले से registered होना चाहिए (जैसे.on("click", ...)में) वरना कुछ visible नहीं होता। .trigger("submit")इस्तेमाल करना और उसेform.submit()जैसा ही मानना; jQuery submit handlers चलाता है और फिर submit करता है, जबकि एक native call handlers को skip कर देता है।- यह भूल जाना कि
.trigger()किसी element पर bound हर handler को fire करता है, इसलिए इसे उसके अपने handler के अंदर call करना infinite recursion पैदा करता है।
- jQuery events mouse, keyboard, form, window, और document actions को respond करते हैं।
- event object, propagation, और bubbling describe करते हैं कि events elements के through कैसे travel करते हैं।
on(),off(), और programmatic triggering control करते हैं कि handlers कब चलते हैं।
Chapter Quiz — Complete all 11 topics to unlock
0/11 topics done
Complete these topics first: