jQuery Event Object
In this page:
$(selector).on("eventName", function (event) {
event.preventDefault();
event.stopPropagation();
event.target;
});Event Type
हर event handler को एक event object मिलता है, और उसकी type property आपको exactly बताती है कि कौन-सा kind का event fire हुआ, तब उपयोगी जब एक function कई event types में shared हो।
उदाहरण: Event Type
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<button id="btn">Click or hover</button>
<script>
$("#btn").on("click mouseenter", function(event) {
console.log("Event type:", event.type);
});
</script>
</body>
</html>Target Element
event.target वह original element है जिसे event मिला, जो असल में आपने जिस पर handler attach किया उसके अंदर गहराई से nested कोई child element हो सकता है।
उदाहरण: Target Element
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="box"><span>Inner text</span></div>
<script>
$("#box").on("click", function(event) {
console.log("Target:", event.target.tagName);
});
</script>
</body>
</html>Current Target
event.currentTarget हमेशा वह element होता है जिस पर handler सीधे attach किया गया था, जो event.target से अलग हो सकता है जब event किसी descendant से bubble हुआ हो -- यह अंतर delegated events में सबसे ज़्यादा मायने रखता है।
उदाहरण: Current Target
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="box"><span>Inner text</span></div>
<script>
$("#box").on("click", function(event) {
console.log("currentTarget:", event.currentTarget.id, "target:", event.target.tagName);
});
</script>
</body>
</html>Mouse Coordinates
Mouse events clientX और clientY जैसी coordinate properties ले जाते हैं, आपको event fire होने के moment browser viewport के relative pointer की position देते हुए।
उदाहरण: Mouse Coordinates
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="pad" style="height:100px">Move mouse here</div>
<script>
$("#pad").on("mousemove", function(event) {
console.log("X:", event.clientX, "Y:", event.clientY);
});
</script>
</body>
</html>Prevent Default
event.preventDefault() call करना उस event के लिए browser की normal built-in action को रोक देता है, जैसे किसी link के href को follow करना या किसी form को submit करना, event को आगे propagate होने से रोके बिना।
उदाहरण: Prevent Default
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<a id="link" href="https://example.com">Click me</a>
<script>
$("#link").on("click", function(event) {
event.preventDefault();
console.log("Navigation stopped");
});
</script>
</body>
</html>event.targetइस्तेमाल करना जब आपका मतलब उस element से हो जिस पर handler bound है; अगर user#boxके अंदर एक<span>जैसे child को click करता है, तोevent.targetspan है जबकिevent.currentTarget#boxहै।- event parameter accept करना भूल जाना,
function() { console.log(event.type); }लिखना औरfunction(event)के बजाय पुराने globalwindow.eventपर निर्भर रहना। event.preventDefault()call करना और यह मान लेना कि यह bubbling भी रोक देता है, जबकि event को parents तक जाने से रोकने के लिएevent.stopPropagation()चाहिए।
Chapter Quiz — Complete all 11 topics to unlock
0/11 topics done
Complete these topics first: