JavaScript Events

 

Event किसी भी हो रहे Action के लिए एक signal है, जिससे पता चलता है कि कोई action perform हुई है । या simply कह सकते हैं कि Events actions या occurrence होती हैं।

For Example -

1. Page का browser में load होना एक event है।

2. किसी भी Element / Tag पर mouse hover करना या mouse को element से हटना event है।

3. Element / Tag को select करना Event है।

4. Keyboard में कोई button press करना event है।

5. किसी input box में लिखना Event है।

6. Select Element में से option select करना Event है।

7. Form को submit करना event है।

JavaScript में ऐसी बहुत सी Events हैं , उनमे से कुछ General & Daily bases पर use होने वाली events इस प्रकार हैं।

Event Name	Description
onload	जब Browser में page load होता है तब यह event होती है।
onmouseover	किसी भी element पर mouse hover करते हैं , तब यह event होती है।
onmouseout	जब element के ऊपर mouse को हटाते हैं।
onclick	किसी Element पर click करने पर यह event occur होती है।
onchange	किसी select list में से कोई particular element select / change करने पर यह event occur होती है।
onkeydown	Keyboard में कुछ लिखने के लिए key press करते ही यह event occur होती है।
onkeypress	और के press करने के बाद input में character लिखते ही यह event होती है।
onkeyup	और जब key press करने के बाद button को release किया जाता है, यह event तब होती है।
onreset	Form reset होने पर यह event होती है।
onsubmit	Form के submit होने पर यह event occur होती है।
onresize	window के resize करने पर यह event होती है।
onscroll	Page scroll करने पर यह event होती है।
onbeforeprint	किसी page को print करने के लिए print dialog box open होने से पहले होती है।
onafterprint	Page print हो जाने के बाद यह event occur होती है।

<div onclick="document.getElementById('myDiv').innerHTML='Hello World'">Click Me!</div>

<div id="myDiv"></div>

Use More than One Events in Element

Element पर एक से ज्यादा भी Events लिए जा सकते है |

Example में जब button पर Click करके hold किया जाएगा तब 'onmousedown' ये event सक्रिय होगा और mouse click को release या छोड़ दिया जाएगा तब 'onclick' event सक्रिय होगा |

For Example,

<button onclick="document.getElementById('myDiv').innerHTML='Hello World'" 

onmousedown="document.getElementById('myDiv').innerHTML='Hi World'">Click Me!</button>

<div id="myDiv"></div>

Important Events

Event	Type	Description
onbeforeunload	document	जब document; unload होनेवाला होता है तब ये event सक्रिय हो जाता है |
onblur	Form	focus; lose हो जाता है तब ये event सक्रिय हो जाता है |
oncanplay	Media	video या audio start होने के लिए तैयार होता है तब ये event सक्रिय हो जाता है |
onchange	Form	Element पर कोई value change की जायेगी तब ये event सक्रिय होता है |
onclick	Mouse	Element पर click किया जाता है तब ये event सक्रिय हो जाता है |
oncontextmenu	Mouse	Element पर rightClick किया जाता है तब ये event सक्रिय होता है |
oncopy	Clipboard	Element का text जब copy किया जाता है तब ये event सक्रिय हो जाता है |
oncut	Clipboard	Element का text जब cut किया जाता है तब ये event सक्रिय हो जाता है |
ondblclick	Mouse	Element पर double click किया जाता है तब ये event सक्रिय हो जाता है |
ondurationchange	Media	जब video या audio; का duration; change हो जाता है तब ये event सक्रिय हो जाता है |
onended	Media	जब video या audio; end पर पहुँच जाता है तब ये event सक्रिय हो जाता है |
onerror	Document	जब कोई external file; load नहीं हो पाती तो ये event सक्रिय होता है |
onfocus	Form	जब Element पर focus किया जाता है तब ये event सक्रिय हो जाता है |
onfocusin	Form	जब Element पर focus किया जाता है तब ये event सक्रिय हो जाता है |
onfocusout	Form	जब Element का focus; lose हो जाता है तब ये event सक्रिय हो जाता है |
oninput	Form	जब <input> या <textarea> के content/text को change किया जाता है तब ये event सक्रिय हो जाता है |
oninvalid	Form	अगर form के <input> element पर कुछ invalid content देकर form submit किया जाता है तब ये event सक्रिय हो जाता है |
onkeydown	Keyboard	जब keyboard की कोई भी key press की जाती है तब ये event सक्रिय हो जाता है |
onkeypress	Keyboard	जब keyboard के alphabets, numeric और special symbols में से कोई भी key press की जाती है तब ये event सक्रिय हो जाता है |
onkeyup	Keyboard	जब keyboard की key release की जाती है तब ये event सक्रिय हो जाता है |
onload	Document	जब Document में दी हुई सभी external files जब webpage पर load हो जाती है तब ये event सक्रिय हो जाता है |
onloadeddata	Media	जब video या audio की current frame जब load हो जाती है तब ये event सक्रिय हो जाता है |
onloadstart	Media	जब video या audio की loading start हो जाती है तब ये event सक्रिय हो जाता है |
onmousedown	Mouse	जब Element पर mouse का कौनसा भी button press किया जाता है तब ये event सक्रिय हो जाता है |
onmouseenter	Mouse	जब Element पर mouse cursor; hover किया जाता है तब ये event सक्रिय हो जाता है |
onmouseleave	Mouse	जब Element पर mouse cursor; जब leave या हटा दिया जाता है तब ये event सक्रिय हो जाता है |
onmousemove	Mouse	जब Element पर mouse cursor; जब move किया जाता है तब ये event सक्रिय हो जाता है |
onmouseout	Mouse	जब Element पर या उसके child element पर mouse cursor; जब out किया जाता है तब ये event सक्रिय हो जाता है |
onmouseover	Mouse	जब Element पर या उसके child element पर mouse cursor; जब hover किया जाता है तब ये event सक्रिय हो जाता है |
onmouseup	Mouse	जब Element पर mouse का कौनसा भी button release किया जाता है तब ये event सक्रिय हो जाता है |
onpaste	Clipboard	जब Element का text जब cut या copy करके paste किया जाता है तब ये event सक्रिय हो जाता है |
onpause	Clipboard	जब-जब video या audio; pause किया जाता है तब-तब ये event सक्रिय हो जाता है |
onplay	Media	जब-जब video या audio; play किया जाता है तब-तब ये event सक्रिय हो जाता है |
onplaying	Media	जब-जब video या audio; play किया जाता है और जब-जब video या audio buffering से stop हो जाता है तब-तब ये event सक्रिय हो जाता है |
onnprogress	Media	जब video या audio; progress या downloading होता है तब ये event सक्रिय हो जाता है |
onreset	Form	जब-जब form को reset किया जाता है तब-तब ये event सक्रिय हो जाता है |
onresize	Document	जब-जब Browser की window को resize किया जाता है तब-तब ये event सक्रिय हो जाता है |
onscroll	Document	जब-जब scroll किया जाता तब-तब ये event सक्रिय हो जाता है |
onsearch	Form	जब <input type="search-in-hindi"> पर कुछ लिखकर 'Enter' या 'x' button को click किया जाता है तो ये event सक्रिय हो जाता है |
onseeked	Media	जब video या audio को आगे या पीछे seek/धकेलना जब end हो जाता है तब ये event सक्रिय हो जाता है |
onseeking	Media	जब video या audio को आगे या पीछे seek/धकेलना जब start हो जाता है तब ये event सक्रिय हो जाता है |
onselect	Form	जब - जब <input> और <textarea> का content select किया जाता है तो ये event सक्रिय हो जाता है |
onsubmit	Form	जब form को submit किया जाता है तब ये event सक्रिय हो जाता है |
ontimeupdate	Media	जब audio या video की playback position; change हो जाती है तब ये event सक्रिय हो जाता है |
ontoggle		जब
ononline		जब Browser; online होता है तो ये event सक्रिय हो जाता है |
onoffline		जब Browser; offline होता है तो ये event सक्रिय हो जाता है |
onvolumechange	Media	जब video या audio का volume change या mute किया जाता है तब ये event सक्रिय हो जाता है |
onwaiting	Media	जब video या audio किसी अगले frame के buffering होने की वजह से रुक जाती है तब ये event सक्रिय हो जाता है |
onwheel	Mouse	जब mouse का scroll button; up या down या laptop का touchpad zoom in या out किया जाता है तब ये event सक्रिय हो जाता है |