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 

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 कर सकते है।

Javascript में 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>

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

<!– onlclickMouseEvent.html –>

<html>
<head>
<title>onclick Demo</title>

<script type=”text/javascript”>
// This function will be called on mouse click event
function clickFunction()
{
    document.write(“You clicked a button..”);
}
</script>

</head>
<body>
// Calling function when button gets clicked.
<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 को निचे उदाहरण द्वारा समझाया जा रहा है।

<!– onmouseoverEventDemo.html –>

<html>
<head>
<title>onmouseover Demo</title>
</head>
<body>
<!– This button will turn red when mouse is taken over it –>
<button onmouseover=”document.bgColor=’red'”>Red</button>
<!– This button will turn green when mouse is taken over it –>
<button onmouseover=”document.bgColor=’green'”>Green</button>
<!– This button will turn blue when mouse is taken over it –>
<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 को निचे उदाहरण के माध्यम से समझाया जा रहा है।

<!– onmouseoutEventDemo.html –>

<html>
<head>
<title>onmouseout Demo</title>
</head>
<body>
<!– Background color will change when you take over and out mouse –>
<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 का उदाहरण निचे दिया जा रहा है।

<!– obdbclickEventDemo.html –>

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

<body>
<!– Calling function when span is double clicked. –>
<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 का उदाहरण निचे दिया जा रहा है।

<!– onmousedownEventDemo.html –>

<html>
<head>
<title>onmousedown Demo</title>
<script>
MyFunction()
{
  // Changing paragraph color using DOM function
  document.getElementById(“p1″).style.color=”blue”;
}
</script>
</head>

<body>
<!– Calling function when mouse pressed down –>
<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 का उदाहरण निचे दिया जा रहा है।

<!– onmouseupEventDemo.html –>

<html>
<head>
<title>onmouseup</title>
<script>
upFunction()
{
    document.getElementById(“s1″).style.color=”red”;
}
</script>
</head>

<body>
<!– Calling function when mouse button is up after pressing down. –>
<span id=”s1″ onmouseup=”upFunction()”>This is some text</span>
</body>

</html>

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

javascript-onmouseup-event-example