jQuery Events का परिचय
$(selector).eventName(function (event) {
// handle event
});Event क्या है
जब भी किसी page या element के साथ कुछ होता है -- एक click, एक keypress, एक page load -- browsers एक event object fire करते हैं, और jQuery आपको इसे listen करने देता है। jQuery का event system browsers के बीच छोटी inconsistencies को smooth कर देता है ताकि आप एक ऐसा handler लिख सकें जो हर जगह काम करे।
उदाहरण: What Is an Event
<!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("Event fired:", event.type);
});
</script>
</body>
</html>एक Event Bind करना
.on(click, function(){...}) से एक handler attach करना browser को बताता है कि जब भी selected element पर वह specific event fire हो तो आपका function तुरंत चलाने के बजाय चलाए।
उदाहरण: Bind an Event
<!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");
});
</script>
</body>
</html>Click Events
Click events उस moment fire होते हैं जब user किसी element के ऊपर mouse button दबाता और छोड़ता है, उन्हें buttons, links, और interactive UI controls के लिए सबसे common event बनाते हुए।
उदाहरण: Click Events
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<button id="btn">Press</button>
<script>
$("#btn").on("click", function() {
console.log("Button pressed and released");
});
</script>
</body>
</html>कई Events
एक single element एक साथ कई अलग event types listen कर सकता है -- उदाहरण के लिए दोनों mouseenter और click -- हर एक का अपना handler function independently react करते हुए। हर handler पूरी तरह independently चलता है, इसलिए एक click handler के fire होने से यह असर नहीं होता कि एक अलग mouseenter handler भी fire होता है या नहीं।
उदाहरण: Multiple Events
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="box">Hover or click</div>
<script>
$("#box").on("mouseenter", function() {
console.log("Mouse entered");
});
$("#box").on("click", function() {
console.log("Box clicked");
});
</script>
</body>
</html>Event Handler Function
किसी event handler को pass किया गया function अपने argument के रूप में एक event object receive करता है, जो useful details ले जाता है जैसे कौन-सा element इसे trigger करता है और, keyboard events के लिए, exactly कौन-सी key दबाई गई थी।
उदाहरण: Event Handler Function
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<input id="field">
<script>
$("#field").on("keydown", function(event) {
console.log("Target:", event.target.id, "Key:", event.key);
});
</script>
</body>
</html>- parentheses के साथ
.on("click", myHandler())इस्तेमाल करना, जो function को तुरंत चलाता है और function के बजाय उसकी return value bind करता है। - elements के मौजूद होने से पहले events bind करना, इसलिए
$("#btn").on("click", ...)कुछ भी नहीं attach करता और कभी नहीं चलता। - एक ही handler को दो बार bind करना, जैसे किसी दूसरे event callback के अंदर, इसलिए एक click इसे कई बार trigger करता है।
Chapter Quiz — Complete all 11 topics to unlock
0/11 topics done
Complete these topics first: