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 निचे दी जा रही है।
Mouse events को आप लगभग सभी HTML tags के साथ use कर सकते है। लेकिन कुछ ऐसे tags भी है जिनके साथ आप इन events को नहीं use कर सकते है। इनकी list निचे दी जा रही है।
आइये अब इसे एक उदाहरण से समझने का प्रयास करते है।
ऊपर दी गयी script निचे दिया गया output generate करती है।
Web surfing के दौरान mouse को अत्यधिक use किया जाता है। इसलिए mouse events का use करके आप एक interactive webpage design कर सकते है।
Javascript में provide किये गए सभी mouse events की list निचे दी जा रही है।
- onclick
- onmouseover
- onmouseout
- ondbclick
- onmousedown
- onmouseup
Mouse events को आप लगभग सभी HTML tags के साथ use कर सकते है। लेकिन कुछ ऐसे tags भी है जिनके साथ आप इन events को नहीं use कर सकते है। इनकी list निचे दी जा रही है।
- <base>
- <bdo>
- <br>
- <html>
- <head>
- <iframe>
- <meta>
- <param>
- <script>
- <style>
- <title>
onclick
जब user किसी element पर click करता है तो onclick event generate होता है। इस event के generate होने पर आप कई actions ले सकते है जैसे की आप किसी function को call कर सकते है या फिर कोई alert show कर सकते है। Mouse events में ये सबसे common event है।
इस event का general syntax निचे दिया जा रहा है।
इस 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 करती है।
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 निचे दिया जा रहा है।
इस event को निचे उदाहरण द्वारा समझाया जा रहा है।
ऊपर दी गयी script निचे दिया गया output generate करती है।
इस 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 करती है।
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 करती है।
ondblclick
जब भी user किसी element पर double click करता है तो ondblclick event generate होता है। इस event के generate होने पर कई actions लिए जा सकते है। जैसे की यदि user किसी image पर double click करे तो उस image की size को large किया जा सकता है।
इसका general syntax निचे दिया जा रहा है।
इसका 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 करती है।
onmousedown
जब user किसी element पर mouse button को press करता है तो onmousedown event generate होता है। इस event को onmouseup event के साथ use किया जाता है। इसका general syntax निचे दिया जा रहा है।
<element-name onmousedown="javascript-code"></element-name>
|
<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 करती है।
onmouseup
जब user किसी element पर से button को press करके release करता है तो onmouseup event generate होता है। इसका general syntax निचे दिया जा रहा है।
<element-name onmouseup="javascript-code"></element-name>
|
<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 करती है।
0 Comments