Artikel Terbaru

Events


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

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



जैसे की यूज़र किसी link पर click करे या menu में से कोई item select करे तो उसके according page में बदलाव आ जाये। ऐसा आप 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 करे तो इसके लिए आप events को use करेंगे।



निचे दिए गए उदाहरण को देखिये।



<html>

<head>

<title>Events Demo 1</title>

<script type="text/javascript">

alert("Hello, This is a alert box without events. This will load with the webpage.");

</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 नहीं कह सकते है। ये script निचे दिया गया web page generate करती है।



ऊपर दिए गए example को नीचे onclick event के साथ दिया गया है।



<html>
<head>
<title>Events Demo 2</title>
<script type="text/javascript">
function message()
{
   alert("This alert box will be displayed when some on clicks on link.");
}
</script>
</head>

<body>
<a href="##" onclick="message();">Click Here</a>
</body>

</html>


 ये script निचे दिया गया web page generate करती है।



javascript-onclick-event-example-output

इस उदाहरण में alert box show करने के लिए event का यूज़ किया गया है। इस webpage में alert box तब ही load होगा जब यूज़र link पर click करेगा।

Events को यूज़ करना बहुत ही आसान है। लेकिन events को यूज़ करने से पहले आपको  कुछ common JavaScript events के बारे में जानने की आवश्यकता है। 



Common JavaScript Events   

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



JavaScript events की mostly 5 categories होती है। इनके बारे में नीचे दिया जा रहा है।

Categories 
Events 
Mouse events  
onclick, onmouseover, onmouseout, ondbclick. 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 
    
JavaScript के कुछ common events के बारे में नीचे दिया जा रहा है। ये वो events है जो regularly यूज़ किये जाते है।  

Events 
Description 
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 किया जाता है ये event defined function को call कर देता है।  

Post a Comment

0 Comments