26- آموزش جاوااسکریپت | رویدادهای موس (Mouse Events)

در این بخش، قصد داریم به بررسی رویدادهای اختصاصی موس بپردازیم. این رویدادها به ما اجازه می‌دهند تا تعاملات بسیار دقیق و جذابی را در رابط کاربری (UI) ایجاد کنیم.

آماده‌سازی عناصر

ابتدا چند عنصر را از صفحه انتخاب می‌کنیم تا روی آن‌ها آزمایش کنیم:

const clearBtn = document.querySelector('.clear-tasks');
const card = document.querySelector('.card');
const heading = document.querySelector('h5');

// تابعی برای نمایش نوع رویداد در کنسول
function runEvent(e) {
    console.log(`EVENT TYPE: ${e.type}`);
}

انواع رویدادهای موس

در ادامه، فهرستی از رویدادهای کاربردی موس را با هم بررسی می‌کنیم:

// ۱. کلیک ساده
clearBtn.addEventListener('click', runEvent);

// ۲. دابل‌کلیک (Double Click)
clearBtn.addEventListener('dblclick', runEvent);

// ۳. فشردن کلیک (Mouse Down - زمانی که کلیک را نگه داشته‌اید)
clearBtn.addEventListener('mousedown', runEvent);

// ۴. رها کردن کلیک (Mouse Up)
clearBtn.addEventListener('mouseup', runEvent);

// ۵. ورود موس به محدوده عنصر (Mouse Enter)
card.addEventListener('mouseenter', runEvent);

// ۶. خروج موس از محدوده عنصر (Mouse Leave)
card.addEventListener('mouseleave', runEvent);

تفاوت MouseOver/MouseOut با MouseEnter/MouseLeave

این بخش بسیار مهم است. رویدادهای mouseover و mouseout با ورود به هر عنصر فرزند (Nested Element) نیز دوباره اجرا می‌شوند، اما mouseenter و mouseleave فقط زمانی که مستقیماً وارد یا خارج از عنصر اصلی (Parent) می‌شویم، اجرا می‌شوند.

// فعال شدن با ورود به هر عنصر داخلی
card.addEventListener('mouseover', runEvent);
card.addEventListener('mouseout', runEvent);

رویداد حرکت موس (MouseMove)

این رویداد در هر لحظه که موس درون یک عنصر حرکت کند، اجرا می‌شود و برای پروژه‌های تعاملی یا بازی‌های مرورگر بسیار کاربردی است.

مثال: نمایش مختصات موس در هدر صفحه در این مثال، هر بار که موس در محدوده کارت حرکت می‌کند، مختصات آن را در تگ h5 نمایش می‌دهیم:

card.addEventListener('mousemove', function(e) {
    // استفاده از offset برای دریافت مختصات نسبت به عنصر
    heading.innerHTML = `MouseX: ${e.offsetX} - MouseY: ${e.offsetY}`;
});

مثال: تغییر رنگ پس‌زمینه بر اساس حرکت موس با استفاده از مختصات X و Y، می‌توانیم رنگ پس‌زمینه صفحه را به صورت داینامیک تغییر دهیم:

card.addEventListener('mousemove', function(e) {
    // تغییر رنگ بدنه‌ی صفحه (RGB)
    document.body.style.backgroundColor = `rgb(${e.offsetX}, ${e.offsetY}, 40)`;
});

در این بخش آموختیم که چگونه رویدادهای موس را مدیریت کرده و از اطلاعات شیء رویداد (مانند مختصات) برای ساخت ویژگی‌های تعاملی بهره ببریم. در بخش بعدی به سراغ رویدادهای کیبورد و ورودی‌های فرم خواهیم رفت.