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

آموزش جاوااسکریپت

مقدمه

در درس قبل با اصول اولیه رویدادها آشنا شدیم. مرورگرها طیف وسیعی از رویدادها را پشتیبانی می‌کنند که می‌توان آنها را بر اساس ماهیت و منشأ وقوع، به دسته‌های مختلفی تقسیم کرد. آشنایی با این دسته‌بندی‌ها به ما کمک می‌کند تا برای هر نوع تعاملی، رویداد مناسب را انتخاب کنیم. در این درس به بررسی مهم‌ترین دسته‌ها یعنی رویدادهای رابط کاربری، ماوس، کیبورد و فرم می‌پردازیم.

رویدادهای رابط کاربری (UI) و فوکوس

این رویدادها به طور کلی به وضعیت پنجره مرورگر، بارگذاری سند و فوکوس عناصر مربوط می‌شوند و لزوماً توسط تعامل مستقیم کاربر ایجاد نمی‌شوند.

  • load: زمانی که کل صفحه و تمام منابع آن (مانند تصاویر، استایل‌ها و اسکریپت‌ها) به طور کامل بارگذاری شدند، روی شیء window اجرا می‌شود.
  • DOMContentLoaded: زمانی که سند HTML به طور کامل بارگذاری و پردازش شده است، روی شیء document اجرا می‌شود. این رویداد منتظر بارگذاری منابع خارجی مانند تصاویر نمی‌ماند و به همین دلیل برای اجرای کدهای اولیه جاوااسکریپت، گزینه‌ی بهتری نسبت به load است.
  • scroll: هر زمان که کاربر صفحه یا یک عنصر قابل اسکرول را اسکرول می‌کند، به طور مداوم اجرا می‌شود.
  • resize: زمانی که ابعاد پنجره مرورگر تغییر می‌کند، روی شیء window اجرا می‌شود.
  • focus و blur: به ترتیب زمانی که یک عنصر (مانند یک فیلد ورودی) فوکوس را به دست می‌آورد یا از دست می‌دهد، اجرا می‌شوند.
Copy Icon JAVASCRIPT 
// A common pattern to run code after the DOM is ready
document.addEventListener('DOMContentLoaded', () => {
    console.log('Document is ready to be manipulated.');
});

// Focus and blur events on an input field
const usernameInput = document.getElementById('username');
usernameInput.addEventListener('focus', () => {
    usernameInput.style.borderColor = 'blue';
});
usernameInput.addEventListener('blur', () => {
    usernameInput.style.borderColor = 'gray';
});

کد بالا دو الگوی رایج را نشان می‌دهد: اجرای کد پس از آماده شدن DOM با استفاده از DOMContentLoaded، و تغییر استایل یک فیلد ورودی در پاسخ به رویدادهای focus و blur.

رویدادهای ماوس (Mouse Events)

این دسته از رویدادها در پاسخ به تعاملات کاربر با ماوس یا دستگاه‌های اشاره‌گر مشابه رخ می‌دهند و از پرکاربردترین رویدادها در ساخت رابط‌های کاربری هستند.

  • click: پس از یک کلیک کامل (فشرده و رها شدن دکمه اصلی ماوس) روی یک عنصر اجرا می‌شود.
  • dblclick: پس از دو بار کلیک سریع روی یک عنصر اجرا می‌شود.
  • mousedown / mouseup: به ترتیب هنگام فشرده شدن و رها شدن یک دکمه ماوس اجرا می‌شوند.
  • mouseover / mouseout: زمانی که نشانگر ماوس وارد محدوده یک عنصر یا از آن خارج می‌شود، اجرا می‌شوند.
  • mousemove: هر بار که نشانگر ماوس روی یک عنصر حرکت می‌کند، به طور مداوم اجرا می‌شود. شیء event در این رویداد حاوی مختصات ماوس (مانند clientX و clientY) است.
Copy Icon JAVASCRIPT 
const box = document.getElementById('interactive-box');

box.addEventListener('mousemove', (event) => {
    // Update the content of the box with mouse coordinates
    box.textContent = `X: ${event.clientX}, Y: ${event.clientY}`;
});

box.addEventListener('mouseout', () => {
    box.textContent = 'Mouse is out!';
});

این مثال نشان می‌دهد که چگونه می‌توان با رویداد mousemove مختصات ماوس را به صورت زنده نمایش داد و با رویداد mouseout به خروج ماوس از محدوده عنصر واکنش نشان داد.

رویدادهای کیبورد (Keyboard Events)

این رویدادها هنگام تعامل کاربر با کیبورد اجرا می‌شوند و برای ساخت میانبرها، اعتبارسنجی ورودی‌ها و بازی‌سازی ضروری هستند.

  • keydown: زمانی که یک کلید فشرده می‌شود، اجرا می‌شود.
  • keyup: زمانی که یک کلید رها می‌شود، اجرا می‌شود.

شیء رویداد در این موارد، پراپرتی‌های مفیدی مانند key (مقدار کاراکتری کلید، مثلاً 'a' یا 'Enter') و code (کد فیزیکی کلید روی کیبورد، مثلاً 'KeyA' یا 'Enter') را در اختیار ما قرار می‌دهد.

Copy Icon JAVASCRIPT 
document.addEventListener('keydown', (event) => {
    console.log(`Key pressed: ${event.key}, Code: ${event.code}`);
    if (event.key === 'Escape') {
        console.log('Escape key was pressed!');
        // For example, close a modal window
    }
});

این شنونده که به کل سند متصل شده، هر بار که کلیدی فشرده می‌شود اطلاعات آن را ثبت می‌کند و به طور خاص به فشرده شدن کلید Escape واکنش نشان می‌دهد.

رویدادهای فرم (Form Events)

این رویدادها به طور خاص به عناصر فرم HTML مانند <form>، <input> و <select> مربوط می‌شوند.

  • submit: روی عنصر <form> اجرا می‌شود، زمانی که فرم در حال ارسال است. معمولاً در این رویداد از event.preventDefault() برای جلوگیری از ارسال سنتی فرم و مدیریت آن با جاوااسکریپت (مثلاً از طریق AJAX) استفاده می‌شود.
  • change: روی عناصر ورودی اجرا می‌شود زمانی که مقدار آن‌ها تغییر کرده و سپس عنصر فوکوس را از دست می‌دهد.
  • input: روی عناصر <input> و <textarea> اجرا می‌شود و برخلاف change، به محض هرگونه تغییر در مقدار (حتی با یک کاراکتر) فوراً اجرا می‌شود. این رویداد برای ایجاد بازخورد زنده به کاربر ایده‌آل است.
Copy Icon JAVASCRIPT 
const myForm = document.getElementById('my-form');
myForm.addEventListener('submit', (event) => {
    event.preventDefault(); // Stop the default form submission
    console.log('Form submission handled by JavaScript.');
});

const searchInput = document.getElementById('search');
searchInput.addEventListener('input', (event) => {
    console.log('Live search for:', event.target.value);
});

این کد دو الگوی بسیار رایج را نمایش می‌دهد: جلوگیری از ارسال پیش‌فرض فرم برای مدیریت آن با جاوااسکریپت، و استفاده از رویداد input برای واکنش فوری به تایپ کاربر در یک فیلد جستجو.

در این درس با دسته‌بندی‌های مختلف رویدادها و پرکاربردترین رویدادهای هر دسته آشنا شدیم. اکنون می‌توانیم به طیف وسیعی از تعاملات کاربر پاسخ دهیم. اما گاهی نیاز داریم که یک رویداد را نه توسط کاربر، بلکه به صورت برنامه‌نویسی و از طریق کد شبیه‌سازی و اجرا کنیم. در درس بعدی، با چگونگی انجام این کار آشنا خواهیم شد.