آموزش مقدماتی JavaScript | رویدادها و DOM

مفهوم رویداد (Event)

رویدادها در JavaScript به هرگونه عمل یا تغییری گفته می‌شود که در مرورگر یا صفحه وب رخ می‌دهد و برنامه شما می‌تواند به آن واکنش نشان دهد. این رویدادها مانند «سیگنال‌هایی» هستند که به کد شما می‌گویند کاربر چه کاری انجام داده است.

مثال‌های رایج از رویدادها:

• کاربر روی یک دکمه کلیک می‌کند (Click).
• کاربر یک کلید از صفحه‌کلید را فشار می‌دهد (Keydown).
• کاربر ماوس را روی یک تصویر حرکت می‌دهد (Mouseover).
• یک صفحه کاملاً بارگذاری می‌شود (Load).

چرا رویدادها مهم هستند؟
رویدادها به شما امکان می‌دهند برنامه‌های «تعاملی» بسازید. بدون رویدادها، صفحه وب شما فقط یک صفحه ثابت و بدون واکنش به کاربر بود.

نحوه گوش دادن به رویدادها (Event Listeners):
در JavaScript، برای واکنش به یک رویداد، معمولاً از متد addEventListener استفاده می‌کنیم. این متد به یک عنصر HTML متصل می‌شود و منتظر می‌ماند تا یک رویداد خاص رخ دهد. سپس تابعی که شما تعریف کرده‌اید اجرا می‌شود.

ساختار کلی:

element.addEventListener("نوع_رویداد", تابع_واکنش);

• element: همان عنصر HTML است که می‌خواهید رویداد را روی آن گوش دهید (مثلاً یک دکمه).
• "نوع_رویداد": نام رویداد به صورت رشته (مانند "click" یا "mouseover").
• تابع_واکنش: تابعی که هنگام رخ دادن رویداد اجرا می‌شود.

مثال ساده:
فرض کنید یک دکمه در صفحه دارید و می‌خواهید وقتی کاربر روی آن کلیک کرد، یک پیام در کنسول نمایش داده شود. کد به این صورت خواهد بود:

// ابتدا دکمه را انتخاب کنید (فرض کنید دکمه دارای id="myButton" است)
let myButton = document.getElementById('myButton');

// سپس یک شنونده رویداد به آن اضافه کنید
myButton.addEventListener('click', function() {
  console.log('دکمه کلیک شد!');
});

نکته مهم: در این مثال، تابعی که به addEventListener داده شده است، تا زمانی که رویداد کلیک رخ ندهد، اجرا نمی‌شود. این تابع فقط در لحظه کلیک شدن دکمه فراخوانی می‌شود.

انواع رویدادها:
رویدادهای زیادی در JavaScript وجود دارند که می‌توانید از آنها استفاده کنید. برخی از پرکاربردترین‌ها عبارتند از:

• click: کلیک ماوس
• dblclick: دوبار کلیک ماوس
• mouseover: ورود ماوس به ناحیه یک عنصر
• mouseout: خروج ماوس از ناحیه یک عنصر
• keydown: فشار دادن یک کلید روی صفحه‌کلید
• keyup: رها کردن کلید
• load: بارگذاری کامل صفحه یا تصویر
• submit: ارسال فرم

خلاصه:
رویدادها و «شنونده‌های رویداد» (event listeners) قلب برنامه‌نویسی تعاملی در JavaScript هستند. با استفاده از addEventListener، می‌توانید به هر عملی که کاربر انجام می‌دهد واکنش نشان دهید و برنامه‌های پویا و جذابی بسازید.