एचटीएमएल डोम माउसइवेंट ऑब्जेक्ट एक ऐसी घटना का प्रतिनिधित्व करता है जो एचटीएमएल दस्तावेज़ तत्वों के साथ माउस की बातचीत पर होती है।
यहाँ, “माउसइवेंट " में निम्नलिखित गुण और विधियाँ हो सकती हैं -
संपत्ति/विधि <वें>विवरण | |
---|---|
altKey | यह दिखाता है कि माउस इवेंट के ट्रिगर होने पर कीबोर्ड पर "ALT" कुंजी को दबाया गया था या नहीं |
button | यह एक संख्या देता है जिसके अनुरूप माउस बटन दबाया गया था जब माउस ईवेंट ट्रिगर किया गया था |
buttons | यह लौटाता है कि माउस घटना के ट्रिगर होने पर कौन से माउस बटन दबाए गए थे |
clientX | यह वर्तमान विंडो के सापेक्ष, माउस पॉइंटर का क्षैतिज (x) निर्देशांक लौटाता है, जब माउस ईवेंट ट्रिगर हुआ था |
clientY | यह वर्तमान विंडो के सापेक्ष, माउस पॉइंटर का वर्टिकल (y) निर्देशांक लौटाता है, जब माउस इवेंट ट्रिगर हुआ था |
ctrlKey | यह दिखाता है कि माउस इवेंट ट्रिगर होने पर कीबोर्ड पर "CTRL" कुंजी दबाई गई थी या नहीं |
getModifierState() | यदि निर्दिष्ट कुंजी सक्रिय है तो यह सत्य है और यदि नहीं तो गलत है |
metaKey | यह दिखाता है कि किसी ईवेंट के ट्रिगर होने पर कीबोर्ड पर "META" कुंजी को दबाया गया था या नहीं |
movementX | यह माउस पॉइंटर के क्षैतिज (x) निर्देशांक को अंतिम माउसमूव इवेंट की स्थिति के सापेक्ष लौटाता है |
आंदोलनY | यह माउस पॉइंटर के वर्टिकल (y) कोऑर्डिनेट को पिछले माउसमूव इवेंट की स्थिति के सापेक्ष लौटाता है |
offsetX | यह लक्ष्य तत्व के किनारे की स्थिति के सापेक्ष माउस पॉइंटर का क्षैतिज (x) निर्देशांक लौटाता है |
offsetY | यह लक्ष्य तत्व के किनारे की स्थिति के सापेक्ष माउस पॉइंटर के लंबवत (y) निर्देशांक देता है |
pageX | यह माउस पॉइंटर के क्षैतिज (x) निर्देशांक को लौटाता है, दस्तावेज़ के सापेक्ष, जब माउस घटना शुरू हुई थी |
पृष्ठY | यह माउस पॉइंटर के लंबवत (y) निर्देशांक लौटाता है, दस्तावेज़ के सापेक्ष, जब माउस ईवेंट ट्रिगर किया गया था |
संबंधित लक्ष्य | यह HTML तत्व लौटाता है जिसने माउस घटना को ट्रिगर किया |
screenX | यह स्क्रीन के सापेक्ष माउस पॉइंटर का क्षैतिज (x) निर्देशांक लौटाता है, जब कोई ईवेंट ट्रिगर होता है |
स्क्रीनवाई | यह स्क्रीन के सापेक्ष माउस पॉइंटर का लंबवत (y) निर्देशांक लौटाता है, जब कोई ईवेंट ट्रिगर होता है |
shiftKey | यह दिखाता है कि किसी ईवेंट के ट्रिगर होने पर कीबोर्ड पर "SHIFT" कुंजी को दबाया गया था या नहीं |
जो | यह लौटाता है कि माउस घटना के ट्रिगर होने पर कौन सा माउस बटन दबाया गया था |
आइए एक उदाहरण देखें MouseEvent clientX संपत्ति -
उदाहरण
<!DOCTYPE html> <html> <head> <title>MouseEvent clientX</title> <style> * { padding: 2px; margin:5px; } form { width:70%; margin: 0 auto; text-align: center; } #outer { width:70%; margin: 0 auto; padding: 0; text-align: center; border:1px solid black; height: 105px; background-color: #28a745; } input[type="button"] { border-radius: 10px; } #upper { border-bottom: 1px solid black; height: 40px; margin: 0 0 15px 0; background-color: #DC3545; } #lower { border-top: 1px solid black; height: 40px; margin: 15px 0 0 0; background-color: #DC3545; } </style> </head> <body> <form> <fieldset> <legend>MouseEvent-clientX</legend> <div id="outer"> <div id="upper"><h2>Danger</h2></div> <div id="lower"><h2>Danger</h2></div> </div> <input type="button" id="start" value="Start" onclick="gameStart()"> <div id="divDisplay"></div> </fieldset> </form> <script> var divDisplay = document.getElementById('divDisplay'); var gameDisplay = document.getElementById('outer'); function playGame(event) { var x = event.clientX; var y = event.clientY; if(y > 95 && y < 110){ divDisplay.textContent = 'Keep Going!'; if(x === 439){ divDisplay.textContent = 'Congrats! You Did it!'; gameDisplay.removeEventListener('mousemove', playGame); } } else{ divDisplay.textContent = 'You moved to DANGER area. You loose!'; gameDisplay.removeEventListener('mousemove', playGame); } } function gameStart(){ gameDisplay.addEventListener('mousemove',playGame); } </script> </body> </html>
आउटपुट
'प्रारंभ करें' . क्लिक करने के बाद हरे (सुरक्षित) क्षेत्र में बटन और कर्सर -
'प्रारंभ करें' . क्लिक करने के बाद हरे (सुरक्षित) क्षेत्र के अंत में बटन और कर्सर -
'प्रारंभ करें . क्लिक करने के बाद ' बटन और कर्सर लाल (खतरे वाले) क्षेत्र में -
साथ ही, “माउसइवेंट " में निम्न इवेंट हो सकते हैं -
<टेबल> इवेंट<वें>विवरण
ऑनक्लिक
घटना तब होती है जब उपयोगकर्ता किसी तत्व पर क्लिक करता है
oncontextmenu
घटना तब होती है जब उपयोगकर्ता संदर्भ मेनू खोलने के लिए किसी तत्व पर राइट-क्लिक करता है
ondblclick
घटना तब होती है जब उपयोगकर्ता किसी तत्व पर डबल-क्लिक करता है
ऑनमाउसडाउन
घटना तब होती है जब उपयोगकर्ता किसी तत्व पर माउस बटन दबाता है
ऑनमाउसएंटर
घटना तब होती है जब सूचक को किसी तत्व पर ले जाया जाता है
ऑनमाउसलीव
घटना तब होती है जब सूचक को किसी तत्व से बाहर ले जाया जाता है
onmousemove
घटना तब होती है जब सूचक आगे बढ़ रहा होता है, जबकि यह एक तत्व के ऊपर होता है
ऑनमाउसआउट
घटना तब होती है जब कोई उपयोगकर्ता माउस पॉइंटर को एनेलेमेंट से, या उसके बच्चों में से किसी एक से बाहर ले जाता है
ऑनमाउसओवर
घटना तब होती है जब सूचक को किसी तत्व या उसके बच्चों में से एक पर ले जाया जाता है
ऑनमाउसअप
घटना तब होती है जब कोई उपयोगकर्ता किसी तत्व पर माउस बटन छोड़ता है
आइए माउसइवेंट ऑनमाउसआउट . का एक उदाहरण देखें घटना -
उदाहरण
<!DOCTYPE html> <html> <head> <title>MouseEvent onmouseout</title> <style> * { padding: 2px; margin:5px; } form { width:70%; margin: 0 auto; text-align: center; } #outer { width:70%; margin: 0 auto; padding: 0; text-align: center; border:1px solid black; height: 105px; background-color: #28a745; } input[type="button"] { border-radius: 10px; } #upper { border-bottom: 1px solid black; height: 40px; margin: 0 0 15px 0; background-color: #DC3545; } #lower { border-top: 1px solid black; height: 40px; margin: 15px 0 0 0; background-color: #DC3545; } </style> </head> <body> <form> <fieldset> <legend>MouseEvent-onmouseout</legend> <div id="outer" onmouseout="gameStart(event)"> <div id="upper"><h2>Danger</h2></div> <div id="lower"><h2>Danger</h2></div> </div> <div id="divDisplay"></div> </fieldset></form> <script> var divDisplay = document.getElementById("divDisplay"); var textSelect = document.getElementById("textSelect"); function gameStart(event) { var fetchedID = event.relatedTarget.id if(fetchedID !== '') divDisplay.textContent = 'You are hovering over '+fetchedID+' <div> element'; } </script> </body> </html>
आउटपुट
हरे (सुरक्षित) क्षेत्र पर मँडराते हुए -
ऊपरी लाल (खतरे) क्षेत्र पर मँडराते हुए -
निचले लाल (खतरे) क्षेत्र पर मँडराते हुए -