JavaScript Mouse Events

মাউস ইভেন্ট শিখুন

জাভাস্ক্রিপ্ট মাউস ইভেন্ট

ব্যবহারকারী যখন মাউসের সাথে ইন্টারঅ্যাক্ট করে তখন মাউসের ঘটনা ঘটে।

সাধারণ মাউস ইভেন্ট:

🎯দ্রষ্টব্য:

মাউস ইভেন্টগুলি ইন্টারেক্টিভ ওয়েব পৃষ্ঠা এবং অ্যাপ্লিকেশন তৈরির জন্য গুরুত্বপূর্ণ, ব্যবহারকারীর ক্রিয়াগুলির প্রতিক্রিয়া যেমন মাউস ক্লিক, স্ক্রোল এবং নড়াচড়ার জন্য নির্দিষ্ট অ্যাকশন ট্রিগার করে।

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>

পয়েন্টার স্থানাঙ্কের প্রদর্শন:

X: 0, Y: 0
আপনার মাউসকে জানালার উপর দিয়ে সরান

টানুন

এই বাক্সটি টেনে আনুন

🎯 মাউস ইভেন্ট লগ: ইভেন্টগুলি এখানে উপস্থিত হয়...

পয়েন্টার ইভেন্ট বৈশিষ্ট্য

সমন্বয় বৈশিষ্ট্য

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

অনুশীলন করুন

নিচের কোনটি একটি বৈধ ইভেন্ট যা ট্রিগার হয় যখন ব্যবহারকারী একটি উপাদানে মাউস বোতাম টিপে?

mouseup
✗ ভুল! মাউসআপ হল একটি ইভেন্ট যা মাউস বোতামটি প্রকাশ করার সময় ট্রিগার হয়
mousedown
✓ ঠিক আছে! মাউসডাউন হল সঠিক ইভেন্ট যা ব্যবহারকারী যখন কোনো উপাদানে মাউস বোতাম টিপে তখন গুলি করা হয়
click
✗ ভুল! ক্লিক হল একটি ইভেন্ট যা মাউসডাউন এবং মাউসআপ উভয়ই ঘটানোর পরে বহিস্কার করা হয়
mousepress
✗ ভুল! মাউসপ্রেস জাভাস্ক্রিপ্টে একটি আইনি ঘটনা নয়