What is jQuery Events in Hindi – ज्कुएरी इवेंट क्या होता है?

by
Table of Contents hide
1 Jquery Events in Hindi
2 jQuery Events List
3 jQuery Mouse Events
3.1 click event
3.2 dblclick event (doubleclick event)
3.3 contextmenu event
3.4 mouseenter event
3.5 mouseleave event
4 jQuery Keyboard Events
4.1 jquery keypress event
4.2 jquery keydown event
4.3 jquery keyup event
5 jQuery Form Events
5.1 focus event
5.2 blur event
5.3 change event
5.4 select event
5.5 submit event
6 jQuery Window Events
6.1 resize event
6.2 scroll event
6.3 document.ready() event
7 अन्य jQuery tutorial के सुझाव

Jquery Events in Hindi

website पे user जो भी action करता है उसे events कही जाती है | जैसे किसी button पे click करना या फिर mouse को किसी जगह पे ले जाना, radio button select करना ये सब एक एक events हैं |

javascript की तरह jQuery में भी हर event के लिए method को define किया गया है | और उन methods को jquery event methods कही जाती है | इस article में हम jquery events को उदाहरण के साथ समझेंगे |

jQuery Events List

jquery events को कई category में बाटां गया है और वो हैं

  1. Mouse Events
  2. Keyboard Events
  3. Form Events
  4. Window Events

jQuery Mouse Events

mouse के जरिये जो action होती है उसे mouse events कही जाती है | jquery में mouse events हैं

  • click
  • dblclick
  • contextmenu
  • mouseenter
  • mouseleave

click event

mouse click event तब trigger होता है जब हम किसी element या object पे single click करते हैं |

dblclick event (doubleclick event)

dblclick event, mouse double click event को दर्शाता है | जब किसी element या object पे double click होता है तब dblclick event trigger होता है |

contextmenu event

contextmenu right click को दर्शाता है | mouse right click पे contextmenu event trigger होता है |

mouseenter event

किसी element या object पे जब mouse लेकर जाते हैं तब mouseenter event trigger होता है |

mouseleave event

जब element या tag पे mouse लेकर वहां से हटा देते हैं तब mouseleave event trigger करता है |

अब चलिए सारे mouse events को एक उदाहरण से समझते हैं |

उदाहरण

<html>
 <head>
  <title>jQuery Tutorial</title>
   <style>
    #div1{
	 border:2px solid green;
	 width:320px;
	 height:70px;
	}
   </style>
  <script src="js/jquery.js"></script>
  <script>
   $(document).ready(function(){
    $("#div1").click(function(){
       $("p").css("color", "blue");
    });
    $("#div1").dblclick(function(){
        $("p").css("color", "red");
    });
    $("div").contextmenu(function(){
        $("p").css("color", "yellow");
    });
    $("div").mouseenter(function(){
        $("p").css("color", "gold");
    });
    $("div").mouseleave(function(){
        $("p").css("color", "mediumvioletred");
    });
   });	
  </script>   
 </head>
 <body>
  <h2>jquery event example</h2>
  <div id="div1">
   <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<p>
  </div>
 </body>
</html>

jQuery Keyboard Events

Keyboard events, keyboard key से जुडी action पे trigger होता है | jQuery में keyboards events हैं:

  • keyup
  • keydown
  • keypress

jquery keypress event

जब हम किसी key को press करते हैं तब keypress event trigger होता है |

jquery keydown event

जब हम किसी key को पूरी तरह से press करते हैं तब keydown event काम करता है |

jquery keyup event

keyup event तब काम करता है जब key को release करते हैं |

उदाहरण

<html>
 <head>
  <title>jQuery Tutorial</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
   $(document).ready(function(){
     $('input').keypress(function(){
	$(this).css("color", "green");
      });
     $('input').keydown(function(){
        $(this).css("color", "orange");
      });
     $('input').keyup(function(){
        $(this).css("color", "blue");
      });
    });	
   </script>   
 </head>
 <body>
  <h2>jquery event example</h2>  
  <div id="div1">
   Input Some Text:<input type="text"></input>
  </div>
 </body>
</html>

keyboard events के लिए हमने एक input text उदाहरण में लिया है | input field की value को target करने के लिए ‘this’ keyword का उपयोग किया है | और हर keyboard event पे input text का color change हो रहा है |

jQuery Form Events

HTML webpage में form के elements से जुड़े actions के लिए jQuery Form Events trigger होता है | jQuery में form events 5 तरह के दर्शाए गए हैं |

  1. focus
  2. blur
  3. change
  4. select
  5. submit

focus event

जब किसी element पे focus रहता उस समय focus event trigger होता है |

blur event

element से focus हटने के बाद blur event trigger होता है |

उदाहरण

<html>
 <head>
  <title>jQuery Tutorial</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
   $(document).ready(function(){
     $('input').focus(function(){
        $(this).css("background-color", "yellow");
      });
     $('input').blur(function(){
        $(this).css("background-color", "white");
      });	 
    });	
  </script>   
 </head>
 <body>
  <h2>jquery event example</h2>  
  <form>
   Name:<input type="text"><br><br>
   Email:<input type="text">
 </form>
</body>
</html>

उदाहरण में हमने focus और blur event को input text के साथ समझाया है | जब input text पे focus रहेगा तब उसका background-color yellow हो जायेगा | और जब focus हटेगा तब background-color white हो जायेगा |

output

jQuery Focus Event Example

change event

जब radio button, या dropdown list में कोई selection होता है या फिर input field की value update होती, उस action पे change event trigger होता है |

उदाहरण

<!DOCTYPE html>    
<html lang="en">    
<head>    
 <title>change demo</title>    
 <style>    
  p{    
   color: red;    
  }    
  </style>    
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
   
</head>    
<body>
 <h1>jquery change event</h1>
 Select Technology:   
 <select id="technology">
  <option selected="selected">select</option> 
  <option>HTML</option>    
  <option>CSS</option>    
  <option>Bootstrap</option>    
  <option>jQuery</option>    
  <option>Javascript</option>  
</select>    
<p id="p1"></p>   
<script>    
   $("select") .change(function () {    
    document.getElementById("p1").innerHTML="Selected value is: "+document.getElementById("technology").value;  
   });  
</script>   
</body>    
</html>

उदाहरण में हमने एक dropdown लिया है और इसकी value selection पे jquery change event trigger हुआ है | और जो भी value आएगा उसे paragraph में display होगा |

output

select event

textbox या textarea का content जब select हुआ होता है उस action पे select event trigger होता है |

submit event

जब form data submit करते हैं उस समय submit event को call कर सकतें हैं |

jQuery Window Events

jquery में कुछ events browser window के लिए define किये गए हैं और वो हैं:

  1. load
  2. unload
  3. resize
  4. scroll

**नॉट पॉइंट : load और unload events jquery version 3.0 से हटा दी गयी है | पेहले के versions में इन दो events का उपयोग होता था | जब browser में website load होता था तब jquery load event trigger होता था | और जब browser से website unload होता था तब unload event trigger होता था |

resize event

जब हम browser window को resize करते हैं यानि उसकी width change करतें हैं तब resize event trigger होता है |

उदाहरण

<!DOCTYPE html>    
<html lang="en">    
<head>    
 <title>window event demo</title>    
 <style>    
  p{    
   color: red;    
  }    
  </style>    
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
   
</head>    
<body>
 <h1>jquery window event</h1> 
 <p id="p1"></p>   
<script>    
   $(document).ready(function () { 
    $(window).resize(function(){   
    document.getElementById("p1").innerHTML="window is resized";
    });
   });  
</script>   
</body>    
</html>

output

scroll event

जब भी हम browser window में scroll करते हैं या फिर किसी div element में scroll करते हैं तब scroll event trigger होता है |

document.ready() event

document.ready() event भी एक window event है | जब html document पूरी तरह से browser में load हो जाता है, उसके बाद ready() event trigger होता है |

अन्य jQuery tutorial के सुझाव