رویدادها در جاوااسکریپت: قلب تعامل در وب
رویدادها (Events) در جاوااسکریپت یکی از اساسی‌ترین مفاهیم برای ایجاد صفحات وب پویا و تعاملی هستند. هر عملی که کاربر در صفحه انجام می‌دهد - از کلیک و حرکت موس تا فشردن کلیدهای صفحه‌کلید - می‌تواند به عنوان رویداد پردازش شود.
تعریف رویداد: هر اتفاق یا عملی که در مرورگر رخ می‌دهد و می‌تواند توسط جاوااسکریپت شناسایی و مدیریت شود.
انواع متداول رویدادها
| دسته‌بندی |
نمونه رویدادها |
| رویدادهای موس |
click, dblclick, mouseover, mouseout |
| رویدادهای صفحه‌کلید |
keydown, keyup, keypress |
| رویدادهای فرم |
submit, change, focus, blur |
| رویدادهای پنجره |
load, resize, scroll |
مدیریت رویدادها با جاوااسکریپت
سه روش اصلی برای مدیریت رویدادها در جاوااسکریپت وجود دارد:
- روش سنتی (Inline Event Handlers): مستقیماً در تگ HTML
- روش DOM Level 0: استفاده از ویژگی‌های عناصر DOM
- روش مدرن (addEventListener): روش توصیه‌شده امروزی
مثال کاربردی: کد زیر نحوه استفاده از addEventListener را نشان می‌دهد:
document.getElementById('myButton').addEventListener('click', function() {
alert('دکمه کلیک شد!');
});
جریان رویداد (Event Flow)
در مدل DOM، رویدادها در سه فاز حرکت می‌کنند:
- فاز Capture: از عنصر ریشه به سمت عنصر هدف
- فاز Target: رسیدن به عنصر هدف
- فاز Bubble: بازگشت از عنصر هدف به ریشه
برای یادگیری عمیق‌تر درباره رویدادها در جاوااسکریپت، می‌توانید اینجا را مطالعه کنید.
رویدادهای سفارشی (Custom Events)
جاوااسکریپت به شما امکان ایجاد رویدادهای سفارشی را می‌دهد. این ویژگی در برنامه‌های پیچیده و فریمورک‌ها بسیار کاربردی است:
مثال: ایجاد و ارسال یک رویداد سفارشی
const event = new CustomEvent('myEvent', {
detail: { message: 'این یک رویداد سفارشی است' }
});
element.dispatchEvent(event);
