এইচটিএমএল ডম মাউস ইভেন্ট অবজেক্ট এমন একটি ইভেন্টকে উপস্থাপন করে যা এইচটিএমএল ডকুমেন্ট উপাদানগুলির সাথে মাউসের মিথস্ক্রিয়ায় ঘটে।
এখানে, “মাউস ইভেন্ট ” এর নিম্নলিখিত বৈশিষ্ট্য এবং পদ্ধতি থাকতে পারে -
| সম্পত্তি/পদ্ধতি | বর্ণনা |
|---|---|
| altKey | মাউস ইভেন্টটি ট্রিগার করার সময় কীবোর্ডে "ALT" কী চাপা হয়েছিল কিনা তা ফেরত দেয় |
| বোতাম৷ | মাউস ইভেন্টটি ট্রিগার করার সময় কোন মাউস বোতামটি চাপা হয়েছিল তার সাথে সম্পর্কিত একটি সংখ্যা ইটার্ন করে |
| বোতাম | মাউস ইভেন্টটি ট্রিগার করার সময় কোন মাউস বোতাম টিপানো হয়েছিল তা ফেরত দেয় |
| ক্লায়েন্টএক্স৷ | এটি মাউস পয়েন্টারের অনুভূমিক (x) স্থানাঙ্ক দেখায়, বর্তমান উইন্ডোর সাথে সম্পর্কিত, যখন মাউস ইভেন্টটি ট্রিগার হয়েছিল |
| ক্লায়েন্টওয়াই৷ | এটি মাউস পয়েন্টারের উল্লম্ব (y) স্থানাঙ্ক ফিরিয়ে দেয়, বর্তমান উইন্ডোর সাপেক্ষে, যখন মাউস ইভেন্টটি ট্রিগার হয়েছিল |
| ctrlKey৷ | মাউস ইভেন্টটি ট্রিগার করার সময় কীবোর্ডে "CTRL" কী চাপা হয়েছিল কিনা তা ফেরত দেয় |
| getModifierState() | নির্দিষ্ট কী সক্রিয় হলে এটি সত্য এবং না থাকলে মিথ্যা দেখায় |
| metaKey | একটি ইভেন্ট ট্রিগার করার সময় কীবোর্ডে "META" কী চাপা হয়েছিল কিনা তা ফেরত দেয় |
| movementX | এটি শেষ মাউসমুভ ইভেন্টের অবস্থানের সাথে সম্পর্কিত মাউস পয়েন্টারটির অনুভূমিক (x) স্থানাঙ্ক ফিরিয়ে আনে |
| movementY | শেষ মাউসমুভ ইভেন্টের অবস্থানের সাপেক্ষে মাউস পয়েন্টারের উল্লম্ব (y) স্থানাঙ্ক ফিরিয়ে আনে |
| offsetX | এটি টার্গেট এলিমেন্টের প্রান্তের অবস্থানের সাথে সম্পর্কিত মাউস পয়েন্টারের অনুভূমিক (x) স্থানাঙ্ক ফিরিয়ে আনে |
| offsetY | টার্গেট এলিমেন্টের প্রান্তের অবস্থানের সাপেক্ষে মাউস পয়েন্টারের উল্লম্ব (y) স্থানাঙ্ক ফিরিয়ে আনে |
| পৃষ্ঠাএক্স৷ | এটি মাউস পয়েন্টারের অনুভূমিক (x) স্থানাঙ্ক, নথির সাথে সম্পর্কিত, যখন মাউস ইভেন্টটি ট্রিগার হয়েছিল |
| পৃষ্ঠাওয়াই৷ | এটি মাউস পয়েন্টারের উল্লম্ব (y) স্থানাঙ্ক দেখায়, নথির সাপেক্ষে, যখন মাউস ইভেন্টটি ট্রিগার হয়েছিল |
| সম্পর্কিত লক্ষ্য | এটি এইচটিএমএল উপাদানটি ফিরিয়ে দেয় যা মাউস ইভেন্টটিকে ট্রিগার করেছে |
| 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> আউটপুট
'স্টার্ট' ক্লিক করার পর সবুজ (নিরাপদ) এলাকায় বোতাম এবং কার্সার -
'স্টার্ট' ক্লিক করার পর সবুজ (নিরাপদ) এলাকার শেষে বোতাম এবং কার্সার −
'শুরু করুন ক্লিক করার পরে৷ লাল (বিপদ) এলাকায় বোতাম এবং কার্সার −
এছাড়াও, “মাউস ইভেন্ট ” নিম্নলিখিত ইভেন্ট থাকতে পারে -
| ইভেন্ট | বর্ণনা |
|---|---|
| অনক্লিক করুন | ইভেন্টটি ঘটে যখন ব্যবহারকারী একটি উপাদানে ক্লিক করে৷ |
| প্রসঙ্গমেনুতে৷ | ঘটনাটি ঘটে যখন ব্যবহারকারী একটি প্রসঙ্গ মেনু খুলতে একটি উপাদানে ডান ক্লিক করে |
| ondblclick৷ | ঘটনাটি ঘটে যখন ব্যবহারকারী একটি উপাদানে ডাবল ক্লিক করে |
| অনমাউসডাউন | ইভেন্টটি ঘটে যখন ব্যবহারকারী একটি উপাদানের উপর একটি মাউস বোতাম টিপে |
| onmouseenter | পয়েন্টারটিকে একটি উপাদানে সরানো হলে ঘটনা ঘটে |
| onmouseleave | ঘটনাটি ঘটে যখন পয়েন্টারটিকে একটি উপাদান থেকে সরানো হয় |
| অনমাউস সরান৷ | ঘটনাটি ঘটে যখন পয়েন্টারটি নড়াচড়া করে যখন এটি অ্যানিলিমেন্টের উপরে থাকে |
| অনমাউসআউট | ঘটনাটি ঘটে যখন একজন ব্যবহারকারী মাউস পয়েন্টারকে অ্যানিলিমেন্ট থেকে বা তার বাচ্চাদের মধ্যে একটির বাইরে নিয়ে যায় |
| অনমাউসওভার৷ | ঘটনাটি ঘটে যখন পয়েন্টারটিকে একটি উপাদানে বা তার সন্তানদের উপর সরানো হয় |
| অনমাউসআপ৷ | ঘটনাটি ঘটে যখন একজন ব্যবহারকারী একটি উপাদানের উপর একটি মাউস বোতাম ছেড়ে দেয় |
আসুন মাউস ইভেন্ট অন মাউসআউট এর একটি উদাহরণ দেখি ঘটনা -
উদাহরণ
<!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> আউটপুট
সবুজ (নিরাপদ) এলাকা −
এর উপর ঘোরাফেরা করছে
উপরের লাল (বিপদ) এলাকায় ঘোরাফেরা করা -
নিম্ন লাল (বিপদ) এলাকায় ঘোরাঘুরি −
