on() से Event Binding
In this page:
$(selector).on("event1 event2", handler);
$(parent).on("eventName", "childSelector", handler);Basic on
on() jQuery का general-purpose method है जो एक या ज़्यादा matched elements पर कोई भी event handler attach करने के लिए इस्तेमाल होता है, और .click() या .bind() जैसे पुराने shortcut methods का modern replacement है।
उदाहरण: Basic on
<!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 via on()");
});
</script>
</body>
</html>on के साथ कई Events
on() को event-name/function pairs का एक object pass करना, जैसे $(button).on({click: fn1, mouseenter: fn2}), कई .on() calls chain करने के बजाय एक ही call में कई अलग handlers attach कर देता है।
उदाहरण: Multiple Events with on
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<button id="btn">Hover or click</button>
<script>
$("#btn").on({
click: function() { console.log("Clicked"); },
mouseenter: function() { console.log("Hovered"); }
});
</script>
</body>
</html>Event Data
on() जो handler function attach करता है वह automatically अपने पहले argument के रूप में event object receive करता है, आपको बिना किसी extra setup के event.type या event.target जैसी details का access देते हुए।
उदाहरण: Event Data
<!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(event) {
console.log("Type:", event.type, "Target:", event.target.tagName);
});
</script>
</body>
</html>Delegated on
on() के दूसरे argument के रूप में एक selector string pass करना इसे एक delegated handler बना देता है, किसी parent पर एक listener को उस selector से match करने वाले किसी भी current या future descendant से आने वाले events respond करने देते हुए।
उदाहरण: Delegated on
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<ul id="list"><li>Item 1</li></ul>
<button id="add">Add Item</button>
<script>
$("#list").on("click", "li", function() {
console.log("Clicked:", $(this).text());
});
$("#add").on("click", function() {
$("#list").append("<li>New Item</li>");
});
</script>
</body>
</html>Named Handlers
किसी anonymous function के बजाय handler को एक named function assign करना का मतलब है आप बाद में उसी function reference को .off() को pass करके exactly वह handler हटा सकते हैं और कोई दूसरा नहीं।
उदाहरण: Named Handlers
<!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>
function logClick() {
console.log("Named handler ran");
}
$("#btn").on("click", logClick);
</script>
</body>
</html>myHandler()को parentheses के साथ.on("click", ...)को pass करना, जो इसे बाद के लिए register करने के बजाय तुरंत चला देता है।$("li").on("click", fn)से एक direct handler attach करना और उम्मीद करना कि यह बाद में जोड़े गए<li>items पर काम करेगा; आपको$("ul").on("click", "li", fn)जैसा delegated form चाहिए।.on({click: fn1, mouseenter: fn2})में एक object इस्तेमाल करना और यह भूल जाना कि हर key को अपना function चाहिए, या anonymous functions इस्तेमाल करना जिन्हें बाद में हटाया नहीं जा सकता।
Chapter Quiz — Complete all 11 topics to unlock
0/11 topics done
Complete these topics first: