رویدادها در جاوااسکریپت: قلب تعامل در وب
رویدادها (Events) در جاوااسکریپت مکانیسمی هستند که به عناصر HTML اجازه می‌دهند به اقدامات کاربر یا تغییرات مرورگر واکنش نشان دهند. این سیستم، پایه‌ای برای ساخت صفحات وب پویا و تعاملی محسوب می‌شود.
نکته کلیدی: هر رویداد مانند یک سنسور عمل می‌کند که منتظر تحریک خاصی (مثل کلیک یا اسکرول) می‌ماند و سپس کدهای مربوطه را اجرا می‌کند.
انواع رویدادهای پرکاربرد
| دسته‌بندی |
نمونه رویدادها |
| ماوس |
click, dblclick, mouseover, mouseout |
| صفحه‌بندی |
load, resize, scroll, DOMContentLoaded |
| کیبورد |
keydown, keyup, keypress |
| فرم‌ها |
submit, change, focus, blur |
روش‌های مدیریت رویدادها
- روش Inline: مستقیم در تگ HTML (کمتر توصیه می‌شود)
<button onclick="alert('کلیک شد!')">کلیک کن</button>
- روش Event Handler: اختصاص تابع به خصوصیت عنصر
element.onclick = function() { console.log('رویداد فعال شد'); };
- روش addEventListener: روش مدرن و انعطاف‌پذیر
element.addEventListener('click', myFunction);
مثال عملی: مدیریت رویداد کلیک
کد زیر نشان می‌دهد چگونه می‌توان یک رویداد کلیک را با addEventListener مدیریت کرد:
document.querySelector('#myButton').addEventListener('click', function() {
alert('دکمه با موفقیت کلیک شد!');
});
برای یادگیری عمیق‌تر درباره رویدادها در جاوااسکریپت، می‌توانید رویداد ها در جاوا اسکریپت.
جریان رویداد (Event Flow)
- فاز Capturing: رویداد از ریشه DOM به سمت عنصر هدف حرکت می‌کند
- فاز Target: رویداد به عنصر هدف می‌رسد
- فاز Bubbling: رویداد از عنصر هدف به سمت ریشه DOM بازمی‌گردد
با استفاده از event.stopPropagation() می‌توانید از انتشار رویداد جلوگیری کنید. همچنین event.preventDefault() رفتار پیش‌فرض رویداد (مثل ارسال فرم) را متوقف می‌کند.
