JavaScript in Hindi – Events

  • Introduction to JavaScript events in Hindi 
  • JavaScript event handlers in Hindi 
  • Different types of JavaScript events in Hindi

Introduction to JavaScript Events 

JavaScript events की मदद से आप अपने webpage को इस तरह design कर सकते है की आपका webpage यूज़र की activity को respond कर सके और उसके अनुसार जरुरी बदलाव कर सके। Events को यूज़ करने से आपका web page और भी dynamic और interactive बन जाता है।

Execute Script on User Action

ज्यादातर events यूज़र के द्वारा generated होते है। अब तक आपने जितने भी webpage बनाए होंगे वो एक बार में ही पूरी तरह load हो जाते है।

मतलब webpage में ऐसा कोई हिस्सा नहीं होता जो load होना बाकी हो। लेकिन ऐसा हो सकता है की आप कुछ information यूज़र के हिसाब से load करना चाहते है। जैसे की यूज़र किसी link पर click करे या menu में से कोई item select करे तो उसके according page में बदलाव आ जाये। ऐसा आप javascript events की मदद से कर सकते है।

हर event को आप HTML attribute की तरह यूज़ कर सकते है और उस tag से related सभी events handle कर सकते है। जैसे की button से related आप onClick() event यूज़ कर सकते है। जैसे ही यूज़र button पर click करें तो कोई action ले सकते है।

उदाहरण के लिए यदि आप webpage में कोई alert box add करते है तो वह webpage के load होते ही show हो जाता है। लेकिन आप चाहते है की वो alert box तब show हो जब यूज़र किसी button या link पर click करे तो इसके लिए आप javascript events को use करेंगे।

Example1: Without event

<html>
<head>
<title>Events Demo 1</title>

<script type="text/javascript">
// Alert message loading with webpage
alert("Hello, This is a alert box without events.");
</script>

</head>

<body>
<p> If you want to show this alert box according to a situation then you should use events</p>
</body>

</html> 

उपर दिए गए उदाहरण में जब webpage load होगा तो उसी के साथ alert box भी load होगा इसे आप dynamic webpage नहीं कह सकते है।

OUtput

javascript-events-example-output

Example2: With onClick event

<html>
 
<head> 
<title>Events Demo 2</title> 

<script type="text/javascript">
// Defining function  
function message() 
{ 
   alert("This alert box will be displayed when someone clicks on link."); 
} 
</script>
 
</head> 

<body>
// Calling function on link click 
<a href="##" onclick="message();">Click Here</a> 
</body> 

</html>

 Output

javascript-onclick-event-example-output

इस उदाहरण में alert box show करने के लिए event का यूज़ किया गया है। इस webpage में alert box तब ही load होगा जब यूज़र link पर click करेगा। Events को यूज़ करना बहुत ही आसान है। लेकिन events को यूज़ करने से पहले आपको  कुछ common JavaScript events के बारे में जानने की आवश्यकता है।

JavaScript Event Categories

JavaScript events को अलग अलग categories में divide किया गया है। जैसे की mouse से related events mouse events की category में आते है और form से related events form events की category में आते है। JavaScript events की mostly 5 categories होती है।

Mouse Events

onclick, onmouseover, onmouseout, ondblclick. onmousedown,  

Form Events

onblur, onchange, onfocus, onselect, onsubmit, onreset

Keyboard Events

onkeypress, onkeydown, onkeyup 

Frame Events

onload, onunload, onresize, onscroll, onunload, onerror 

Media Events

onplay, onpause, onerror, onprogress, onplaying

Common JavaScript Events

JavaScript के कुछ common events के बारे में नीचे दिया जा रहा है। ये वो events है जो regularly यूज़ किये जाते है।  

onclick=” “

ये एक mouse event है। आप इसे clickable components (link, button) के साथ यूज़ कर सकते है। Component पर click होते ही define किया गया JavaScript function call हो जाता है।

onfocus=” ” 

ये एक form event है। इससे form को जैसे ही focus मिलता है script execute हो जाती है। 

onblur-” ” 

ये भी एक form event है जो जैसे ही form से focus हटता है script को execute करता है। 

onchange=” ” 

जैसे ही component में कोई change होता है ये event script को execute कर देता है। जैसे की list में से कोई दूसरा item select किया जाये।

onSelect=” “

जब यूज़र text को select करता है तो ये event define किये गए function को call करता है।  

onmouseover=” ” 

जैसे ही component पर mouse को ले जाया जाता है script execute हो जाती है।

onmouseout=” ” 

जैसे ही component से mouse को हटाया जाता है ये event script को execute कर देता है।  

onload=” ” 

जैसे ही page की loading complete होती है script execute हो जाती है।

onunload=” ” 

जैसे ही browser में कोई नयी window खोली जाती है ये event script को execute कर देता है।

onsubmit=” ” 

जैसे ही form को submit किया जाता है ये javascript event defined function को call कर देता है।  

Previous: JavaScript Functions
Next: JavaScript Mouse Events