If tutorials available on this website are helpful for you, please whitelist this website in your ad blocker😭 or Donate to help us ❤️ pay for the web hosting to keep the website running.
Events किसी भी हो रहे Action के लिए एक signal है, जिससे पता चलता है कि कोई action perform हुई है । या simply कह सकते हैं कि Events actions या occurrence होती हैं।
web page पर कोई तरह की activity event हो सकती हैं For Example -
Page का browser में load होना एक event है।
किसी भी Element / Tag पर mouse hover करना या mouse को element से हटना event है।
Element / Tag को select करना Event है।
Keyboard में कोई button press करना event है।
किसी input box में लिखना Event है।
Select Element में से option select करना Event है।
Form को submit करना event है।
हालाँकि jQuery JavaScript की library है तो इसमें में भी वही events होती हैं जो JavaScript में होती हैं, jQuery में events को JavaScript Events से थोड़ा अलग तरीके से handle करते हैं।
लेकिन jQuery में Events handle करने के लिए event के name के ही predefined functions provide किये हैं , जिनकी help से हम आसानी से उन events को handle कर सकते हैं।
Events handle करने के लिए कुछ events methods इस प्रकार है -
| Event Method Name | Description |
|---|---|
| mouseover() | किसी भी element पर mouse hover करते हैं । |
| mouseout() | जब element के ऊपर mouse को हटाते हैं। |
| click() | किसी Element पर click करने पर यह event occur होती है। |
| change() | किसी select list / checkbox में से कोई particular element select / change करने पर यह event occur होती है। |
| keydown() | Keyboard में कुछ लिखने के लिए key press करते ही यह event occur होती है। |
| keypress() | और के press करने के बाद input में character लिखते ही यह event होती है। |
| keyup() | और जब key press करने के बाद button को release किया जाता है, यह event तब होती है। |
| submit() | Form के submit होने पर यह event occur होती है। |
| scroll( | Page scroll करने पर यह event होती है। |
File : jquery_event.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Events In Hindi </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<p><span class="mouse_over">mouseover</span> / <span class="mouse_out"> mouseout event</span></p>
<button id="click_event">click event</button> <br>
<select id="select">
<option>change event</option>
<option>select me</option>
<option>Select me</option>
</select> <br>
<p>keydown / keyup event <input type="text" placeholder="Type here something" id="input"></p>
<script>
window.onload = function(){
if (window.jQuery){
/*mouse over*/
$('.mouse_over').mouseover(function(event) {
console.log('Event : mouseover');
});
/*mouse out*/
$('.mouse_out').mouseout(function(event) {
console.log('Event : mouseout');
});
/*click event using id selector*/
$('#click_event').click(function(event) {
console.log('Event : click');
});
/*select event*/
$('#select').click(function(event) {
console.log('Event : change');
});
/*input event*/
$('#input').keydown(function(event) {
console.log('Event : keydown & You typed : '+$(this).val());
});
$('#input').keyup(function(event) {
console.log('Event : keyupd');
});
}
}
</script>
</body>
</html>mouseover / mouseout event
keydown / keyup event
❕ Important
jQuery में हर एक event को एक callback function की help से handle किया जाता है , जिसमे हमें उस current element का Object मिलता है जिसे $(this) के साथ access कर सकते हैं।