Textual description of firstImageUrl

JavaScript in Hindi : Mouse Events

JavaScript Mouse Events

  • Introduction to javascript mouse events in Hindi 
  • Javascript onclick event in Hindi 
  • Javascript onmouseover event in Hindi 
  • Javascript onmouseout event in Hindi
  • Javascript ondbclick event in Hindi
  • Javascript onmousedown event in Hindi

Introduction to JavaScript Mouse Events

ऐसे events जो mouse द्वारा generate होते है mouse events कहलाते है। जैसे की यदि कोई user किसी element (div, button etc.) पर click करता है तो onclick event generate होता है। उसी प्रकार यदि user mouse के cursor को किसी web element पर ले जाता है तो onmouseover event generate होता है। Web surfing के दौरान mouse को अत्यधिक use किया जाता है। इसलिए mouse events का use करके आप एक interactive webpage design कर सकते है।

Java script में provide किये गए सभी mouse events की list निचे दी जा रही है।
  1. onclick 
  2. onmouseover
  3. onmouseout
  4. ondbclick
  5. onmousedown
  6. onmouseup
इन सभी mouse events के बारे में आगे detail से बताया जाएगा।

Mouse events को आप लगभग सभी HTML tags के साथ use कर सकते है। लेकिन कुछ ऐसे tags भी है जिनके साथ आप इन events को नहीं use कर सकते है। इनकी list निचे दी जा रही है।
  1. <base>
  2. <bdo>
  3. <br>
  4. <html>
  5. <head>
  6. <iframe>
  7. <meta>
  8. <param>
  9. <script>
  10. <style>
  11. <title>

onclick

जब user किसी element पर click करता है तो onclick event generate होता है। इस event के generate होने पर आप कई actions ले सकते है जैसे की आप किसी function को call कर सकते है या फिर कोई alert show कर सकते है। Mouse events में ये सबसे common event है।

इस event का general syntax निचे दिया जा रहा है।

<element-name onclick="javascript-code"></element-name>

आइये अब इसे एक उदाहरण से समझने का प्रयास करते है।

<html>
<head>
<title>onclick Demo</title>
<script type="text/javascript">
function clickFunction()
{
    document.write("You clicked a button..");
}
</script>
</head>

<body>
<button onclick="clickFunction()">Click here..</button>
</body>
</html>

ऊपर दी गयी script निचे दिया गया output generate करती है। 

javascript-onlick-event-example



onmouseover 

जब user किसी element पर mouse cursor को ले जाता है तो onmouseover event generate होता है। इस event के generate होने पर आप कई प्रकार के actions ले सकते है। जैसे की जैसे ही user किसी heading पर mouse को ले जाए तो आप उस heading से related detail किसी div में show कर सकते है। इस event को ज्यादातर onmouseout event के साथ use किया जाता है। इसका general syntax निचे दिया जा रहा है।

<element-name onmouseover="java-script code"></element-name>

इस event को निचे उदाहरण द्वारा समझाया जा रहा है।

<html>
<head>
<title>onmouseover Demo</title>
</head>

<body>
<button onmouseover="document.bgColor='red'">Red</button>
<button onmouseover="document.bgColor='green'">Green</button>
<button onmouseover="document.bgColor='blue'">Blue</button>
</body>

</html>

ऊपर दी गयी script निचे दिया गया output generate करती है।

javascript-onmouseover-event-example


onmouseout

जब कोई user किसी element से mouse cursor को हटाता है तो onmouseout event generate होता है। इस event को ज्यादातर onmouseover event के साथ use किया जाता है। इसका general syntax निचे दिया जा रहा है। 

<element-name onmouseout="javascript-code"></element-name>

इस event को निचे उदाहरण के माध्यम से समझाया जा रहा है।

<html>
<head>
<title>onmouseout Demo</title>
</head>

<body>
<button onmouseover="document.bgColor='white'" onmouseout="document.bgColor='black'">Lights</button>
</body>

</html>

ऊपर दी गयी script निचे दिया गया output generate करती है।

javascript-onmouseout-event-example



ondblclick

जब भी user किसी element पर double click करता है तो ondblclick event generate होता है। इस event के generate होने पर कई actions लिए जा सकते है। जैसे की यदि user किसी image पर double click करे तो उस image की size को large किया जा सकता है। इसका general syntax निचे दिया जा रहा है। 

<element-name ondblclick="javascript-code"></element-name>

इस event का उदाहरण निचे दिया जा रहा है।

<html>
<head>
<title>ondblclick Demo</title>
<script>
function myFunction()
{
      alert("Hello Reader..");
}
</script>
</head>

<body>
<span ondblclick="myFunction()">Click here..</span>
</body>

</html>

ऊपर दी गयी script निचे दिया गया output generate करती है। 

javascript-ondblclick-event-example



onmousedown

जब user किसी element पर mouse button को press करता है तो onmousedown event generate होता है। इस event को onmouseup event के साथ use किया जाता है। इसका general syntax निचे दिया जा रहा है। 

<element-name onmousedown="javascript-code"></element-name>

इस event का उदाहरण निचे दिया जा रहा है।

<html>
<head>
<title>onmousedown Demo</title>
<script>
MyFunction()
{
  document.getElementById("p1").style.color="blue";
}
</script>
</head>

<body>
<p  id="p1" onmousedown="MyFunction()">
This is a paragraph. When you keep the mouse button pressed the text color will be blue. When you leave the mouse button text colour will become black.
</p>
</body>

</html>

ऊपर दी गयी script निचे दिया गया output generate करती है। 

javascript-onmousedown-event-example



onmouseup

जब user किसी element पर से button को press करके release करता है तो onmouseup event generate होता है। इसका general syntax निचे दिया जा रहा है। 

<element-name onmouseup="javascript-code"></element-name>

इस event का उदाहरण निचे दिया जा रहा है।

<html>
<head>
<title>onmouseup</title>
<script>
upFunction()
{

    document.getElementById("s1").style.color="red";
}
</script>
</head>

<body>
<span id="s1" onmouseup="upFunction()">This is some text</span>
</body>

</html>

ऊपर दी गयी script निचे दिया गया output generate करती है। 

javascript-onmouseup-event-example


      DMCA.com Protection Status

 Leave a comment