জাভাস্ক্রিপ্ট মাউস ইভেন্ট
ব্যবহারকারী যখন মাউসের সাথে ইন্টারঅ্যাক্ট করে তখন মাউসের ঘটনা ঘটে।
সাধারণ মাউস ইভেন্ট:
- click
- dblclick
- mouseover / mouseout
- mousemove
- mousedown / mouseup
দ্রষ্টব্য:
মাউস ইভেন্টগুলি ইন্টারেক্টিভ ওয়েব পৃষ্ঠা এবং অ্যাপ্লিকেশন তৈরির জন্য গুরুত্বপূর্ণ, ব্যবহারকারীর ক্রিয়াগুলির প্রতিক্রিয়া যেমন মাউস ক্লিক, স্ক্রোল এবং নড়াচড়ার জন্য নির্দিষ্ট অ্যাকশন ট্রিগার করে।
Mouseover এবং Mouseout
উদাহরণ
<div id="box" style="width:200px;height:100px;padding:16px;border:1px solid #000;">
Move mouse over this box
</div>
<script>
const box = document.getElementById("box");
// Let box listen for mouseover
box.addEventListener("mouseover", function () {
box.innerHTML = "Mouse is over me!";
});
// Let box listen for mouseout
box.addEventListener("mouseout", function () {
box.innerHTML = "Move is out!";
});
</script>
ইন্টারেক্টিভ মাউসওভার প্রদর্শন
মাউসের উপর ঘোরান এবং পরীক্ষা করুন:
এই বাক্সের উপর মাউস সরান
মাউস অবস্থান: আউট
সাধারণ পয়েন্টার ইভেন্ট
| ঘটনা | ব্যাখ্যা |
|---|---|
| click | একই উপাদানে প্রধান মাউস বোতাম (সাধারণত বামে) দিয়ে মাউসডাউন এবং মাউসআপ উভয় ইভেন্টের পরে আগুন |
| dblclick | একই উপাদানে দুটি দ্রুত ক্লিক করার পরে ট্রিগার হয় |
| mousedown / mouseup | এই ঘটনাগুলি যখন একটি মাউস বোতাম টিপে (মাউসডাউন) বা ছেড়ে দেওয়া হয় (মাউসআপ), যথাক্রমে তখন আগুন লাগে |
| mousemove | পয়েন্টার ক্রমাগত ট্রিগার করে যখন পয়েন্টার একটি উপাদানের উপর চলে যায়, কার্সার সম্পর্কে অবস্থানগত তথ্য (সমন্বয়) প্রদান করে |
| mouseover | যখন মাউস একটি উপাদানের (বা এর বাচ্চাদের মধ্যে একটি) উপর চলে যায় তখন ট্রিগার করে। |
| mouseout | মাউস কোনো উপাদান ছেড়ে গেলে ট্রিগার করে |
| mouseenter | মাউসওভারের মতোই, কিন্তু মাউস যখন কোনো উপাদানে প্রবেশ করে, তার বংশধর নয়, তখন ট্রিগার করে, এটি CSS : hover আচরণের মতো ক্ষেত্রে ব্যবহার করার জন্য আরও সংবেদনশীল করে তোলে |
| mouseleave | মাউসআউটের মতোই, কিন্তু মাউস যখন কোনো উপাদান ছেড়ে চলে যায়, তার বংশধর নয়, তখন ট্রিগার করে, এটি CSS :hover আচরণের মতো ক্ষেত্রে ব্যবহার করার জন্য আরও সংবেদনশীল করে তোলে |
| contextmenu | ব্যবহারকারী যখন প্রসঙ্গ মেনু খোলার চেষ্টা করে তখন ট্রিগার হয়, সাধারণত ডান-ক্লিক করে |
| wheel | যখন মাউস হুইল ঘোরানো হয় তখন ট্রিগার হয়, সাধারণত স্ক্রলিং বা জুমিং অপারেশনের জন্য ব্যবহৃত হয় |
| drag events | ড্র্যাগ-এন্ড-ড্রপ ইন্টারফেস (ড্র্যাগস্টার্ট, ড্র্যাজেন্ড, ড্র্যাগোভার, ইত্যাদি) বাস্তবায়নের জন্য ব্যবহৃত সিকোয়েন্স ইভেন্ট |
মাউসের অবস্থান
মাউস ইভেন্ট ইন্টারফেস এমন একটি ইভেন্ট অবজেক্ট প্রদান করে যার দরকারী বৈশিষ্ট্য রয়েছে যেমন মাউস বোতাম টিপলে।
উদাহরণ
event.clientX event.clientY
<p id="demo">Move the mouse in this window!</p>
<script>
// Let document listen for mousemove
document.addEventListener("mousemove", function (event) {
document.getElementById("demo").innerHTML =
"X: " + event.clientX + " Y: " + event.clientY;
});
</script>
পয়েন্টার স্থানাঙ্কের প্রদর্শন:
আপনার মাউসকে জানালার উপর দিয়ে সরান
টানুন
এই বাক্সটি টেনে আনুন
পয়েন্টার ইভেন্ট বৈশিষ্ট্য
সমন্বয় বৈশিষ্ট্য
clientX / clientY
পয়েন্টার উইন্ডোর সাপেক্ষে স্থানাঙ্ক
pageX / pageY
পয়েন্টার নথির সাথে সম্পর্কিত স্থানাঙ্ক
বোতাম বৈশিষ্ট্য
button
মাউস বোতাম টিপে (0=বাম, 1=কেন্দ্র, 2=ডান)
buttons
সমস্ত মাউস বোতাম টিপুন
বিকল্প কী বৈশিষ্ট্য
ctrlKey
Ctrl কী চাপা হয়?
shiftKey
Shift কী চাপা হয়?
altKey
Alt কী চাপা?
লক্ষ্য বৈশিষ্ট্য
target
ইভেন্ট টার্গেট উপাদান
currentTarget
বর্তমান লক্ষ্য উপাদান
relatedTarget
সম্পর্কিত উপাদান (মাউসেন্টার/মাউসলিভের জন্য)
দ্রষ্টব্য:
স্পর্শ এবং কলম জড়িত আধুনিক, ডিভাইস-স্বাধীন ইনপুট পরিচালনার জন্য, বিকাশকারীরা প্রায়শই নতুন পয়েন্টার ইভেন্ট API ব্যবহার করে।
সিকোয়েন্স ডেমোনস্ট্রেশনে ক্লিক করুন
ক্লিক ইভেন্টের ক্রম দেখুন:
এখানে ক্লিক করুন
অপেক্ষায়...
অর্ডার ক্লিক করুন:
1. mousedown → 2. mouseup → 3. click
ডাবল ক্লিক: 1. মাউসডাউন → 2. মাউসআপ → 3. ক্লিক → 4. মাউসডাউন → 5. মাউসআপ → 6. ক্লিক → 7. dblclick