Javascript Events in Hindi – JS Events in HTML

by
Table of Contents hide
1 html event क्या है?
2 html events कितने तरह के होतें हैं ?
3 html events और उसकी बर्णन
3.1 button events
3.2 mouse events
3.3 keyboard events
3.4 window events
3.5 Form Events
4 अन्य tutorial के सुझाव

html event क्या है?

html में कोई क्रिया को event कहा जाता है | जब हम किसी element पे click करें या mouse ले जाएँ या फिर जब page load के समय कुछ action हो, तो इस action या trigger को event कही जाती है |

button click करना या कोई dropdown में option को select करना ये सब एक एक क्रिया यानि event हैं |

html events कई सारी होती हैं और इन events पे क्या काम होना है उसे javascript function के जरिये लिखी जाती है |

html events कितने तरह के होतें हैं ?

html events जिसे javascript events भी कही जाती है वो कई तरह के होतें |

  1. Window Events – widow events window object के लिए काम करती है | इस events को body tag के लिए लिखी जाती है | onload, onunload, onresize, onmessage, onbeforeprint, onafterprint आदि window events हैं |
  2. Form Events – form के ऊपर कोई activity करना हो या कोई trigger fire करना हो तो form events लिखी जाती है | और इसे form tag के अंदर लिखी जाती है | form events कुछ उदाहरण हैं onblur, onchange, onsubmit |
  3. Mouse Events – mouse click पे जो events fire होतें हैं उन्हें mouse events कही जाती है | onclick, ondblclick, onmousedown, onmouseup, onmousemove आदि mouse events हैं |
  4. Keyboard Events – keyboard key के ऊपर जो events fire होतें हैं उसे keyboard events कही जाती है | onkeydown, onkeyup, onkeypress आदि keyboards events हैं |
  5. Media Events – media elements जैसे <audio>, <video>, <embed> tag से जुड़े events को media events कही जाती | onabort, oncanplay, oncanplaythrough, oncuechange, onplay, onprogress आदि media events हैं |
  6. Clipboard Events – ये वो events हैं जो clipboard action जैसे cut, copy, paste पे काम करते हैं | oncut, oncopy, onpaste आदि clipboard events हैं |

html events और उसकी बर्णन

यहाँ हम कुछ html events को समझेंगे जो javascript program में अधिक इस्तेमाल होता है |

button events

  1. onclick event : ये एक button click event है | जब html page में कोई button click होता है तब ये event fire होता है |
  2. ondblclick event : जब किसी button पे double click किया जाता तब ondblclick event काम करता है |
  3. oncontextmenu event : html page पे किसी button पे right करने के बाद oncontextmenu event fire होता है |

mouse events

  1. onmousehover() event : html page में जब हम किसी element पे या किसी section पे mouse लेकर जातें है उसे mousehover कहा जाता है और उस वक़्त जो event fire होता है उसे onmousehover event कही जाती है |
  2. onmouseout() event : html page में जब कहीं पे mouse ले जाकर वहां से हटाया जाता है उसे mouseout कहा जाता और उस समय onmouseout event fire होता है |
  3. onmousedown() event : किसी element या section पे जब mouse रख कर press किया जाता है उस वक़्त onmousedown() event fire होता है |
  4. onmouseup() event : जब किसी element पे mouse press करके फिर release की जाती है तब onmouseup() event fire होती है |

keyboard events

  1. onkeydown() event : ये event तब fire होता है जब user किसी keyboard key को press किये रखता है |
  2. onkeyup() event : जब user किसी key को press करके release कर देता है तब onkeyup() event fire होता है |

window events

  1. onload() event : जब webpage browser पे पूरी तरह load हो जाता है तब onload() event काम करता है |
  2. unload() event : जब webpage को browser से unload करते हैं उस समय unload() event fire होता है |
  3. onresize() event : browser में जब web page की size को बदली जाती है उस समय onresize event काम करता है |

Form Events

  1. onfocus() event : form element में जब किसी input field के ऊपर mouse हो तो उस समय onfocus event fire होता है |
  2. onblur() event : form element में किसी element पे focus करके उसके बाद mouse हटा दिया जाता है उस समय onblur event fire होता है |
  3. onsubmit() event : form document submit करने पर onsubmit event fire होता है |
  4. onchange() event : जब किसी input element की state change होता है जैसे की dropdown list में जब हम कोई option select करतें हैं या फिर radio button पे click करते हैं उस समय onchange event fire होता |

button click event example

<!doctype html>
 <html>
   <head>
    <title>javascript event demo</title>
   </head>
   <body>
    <h1 id="heading1">html events example</h1>
    <button onclick="clickfn()">Click Here</button>
   </body>
	<script type="text/javascript">
	  function clickfn()
	  {
	    document.getElementById('heading1').style.color="red";
	  }
	</script> 
  </html>

ऊपर के code में हमने onclick() event का एक उदाहरण लिया है उसमे जब button click होगा तब <h1> tag का color, red हो जाएगा |

output

onclick event example

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