فرض کن وارد یک وب‌سایت می‌شوی و روی یک دکمه کلیک می‌کنی، یا اسکرول می‌کنی و ناگهان یک انیمیشن ظاهر می‌شود، یا وقتی فرم ثبت‌نام را پر می‌کنی، پیام خطا می‌بینی. همه این اتفاق‌ها به لطف مدیریت رویدادها (Event Handling) در جاوااسکریپت رخ می‌دهد.

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

✅ Event چیست؟

Event به هر اتفاقی می‌گوییم که در صفحه وب رخ می‌دهد. مثل:

  • کلیک کردن روی یک دکمه
  • حرکت ماوس روی یک عنصر
  • تایپ کردن در input
  • اسکرول کردن صفحه
  • ارسال فرم

هر بار که چنین اتفاقی می‌افتد، مرورگر یک Event تولید می‌کند. ما می‌توانیم با جاوااسکریپت این Eventها را گوش کنیم و واکنش نشان دهیم.

✅ چرا Event Handling مهم است؟

بدون مدیریت رویدادها، صفحات وب مثل یک عکس ثابت هستند. هیچ تعاملی بین کاربر و صفحه وجود ندارد. اما وقتی Event Handling را یاد بگیری:

  • می‌توانی روی رفتار کاربر واکنش نشان دهی.
  • صفحات را زنده و پویا کنی.
  • فرم‌های هوشمند بسازی.
  • تجربه کاربری (UX) را چندین برابر بهتر کنی.
  • در مسیر حرفه‌ای شدن به سراغ فریم‌ورک‌هایی مثل React بروی که همه‌چیزشان حول Eventها می‌چرخد.

✅ چه کارهایی در Event Handling انجام می‌دهیم؟

حالا ببینیم وقتی حرف از Event Handling می‌زنیم، درباره چه کارهایی صحبت می‌کنیم. در این مقاله به‌صورت کلی توضیح می‌دهیم و در مقالات فرزند، هر بخش را مفصل بررسی خواهیم کرد.

🔶 ۱. انواع رویدادها (Event Types)

در جاوااسکریپت، Eventها به دسته‌های مختلف تقسیم می‌شوند. هر دسته کاربردهای خاص خودش را دارد.

Mouse Events

هر کاری که با موس انجام می‌دهی، مثل:

  • click: وقتی روی یک المان کلیک می‌کنی.
  • dblclick: دوبار کلیک پشت سر هم.
  • mouseover: وقتی موس روی المان می‌رود.
  • mouseout: وقتی موس از روی المان خارج می‌شود.
  • mousedown: وقتی دکمه موس را فشار می‌دهی.
  • mouseup: وقتی دکمه موس را رها می‌کنی.

مثلاً وقتی موس روی عکس یک محصول می‌رود و آن محصول بزرگ می‌شود، کار Mouse Event است.

Keyboard Events

وقتی کاربر دکمه‌های کیبورد را می‌زند:

  • keydown: وقتی کلید را فشار می‌دهد.
  • keyup: وقتی کلید را رها می‌کند.

مثلاً وقتی در یک input می‌نویسی و به محض تایپ حروف نتایج جستجو را می‌بینی، کار Keyboard Events است.

Form Events

مربوط به فرم‌ها و inputها است:

  • focus: وقتی کاربر روی input کلیک می‌کند.
  • blur: وقتی کاربر از input خارج می‌شود.
  • change: وقتی محتوای input تغییر می‌کند.
  • submit: وقتی فرم ارسال می‌شود.

مثلاً وقتی فیلد ایمیل را پر نمی‌کنی و بعد از blur پیام خطا ظاهر می‌شود.

Window Events

مربوط به کل پنجره مرورگر است:

  • load: وقتی کل صفحه بارگذاری شده.
  • scroll: وقتی کاربر صفحه را بالا یا پایین می‌برد.
  • resize: وقتی کاربر اندازه پنجره مرورگر را تغییر می‌دهد.

مثلاً وقتی حین اسکرول کردن، Progress Bar حرکت می‌کند، کار Window Event است.

🔶 ۲. اضافه کردن Event (Event Listeners)

تا اینجا فهمیدیم رویداد چیست. حالا باید یاد بگیریم چطور این رویدادها را گوش کنیم.

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

«اگر فلان رویداد اتفاق افتاد، فلان کد را اجرا کن.»

مثلاً:

button.addEventListener("click", () => {
  console.log("Button clicked!");
});

همچنین می‌توانیم Event Listener را حذف کنیم تا دیگر گوش ندهد:

button.removeEventListener("click", myFunction);

یکی از نکات مهم این است که:

  • Event Handler را به‌صورت ناشناس (Anonymous Function) بنویسی یا
  • در قالب تابع نام‌دار (Named Function)

این تفاوت در remove کردن Event Listener بسیار مهم است که در مقاله فرزند راهنمای کامل addEventListener توضیح خواهیم داد.

🔶 ۳. Event Object

هر وقت Event اتفاق بیفتد، مرورگر یک شیء می‌سازد که اطلاعات کاملی درباره آن Event دارد. این شیء را Event Object می‌نامند و معمولاً به شکل e یا event در تابع‌ها استفاده می‌کنیم.

داخل این شیء اطلاعات جالبی است مثل:

  • e.target: المانی که روی آن رویداد اتفاق افتاده.
  • e.type: نوع رویداد (مثل click یا submit)
  • e.preventDefault(): برای جلوگیری از رفتار پیش‌فرض مرورگر.
    • مثلاً جلوگیری از ارسال فرم.
  • e.stopPropagation(): جلوگیری از بالا رفتن رویداد به المان‌های والد.

این مفاهیم در پروژه‌های واقعی بسیار مهم هستند. مثلاً اگر ندانی تفاوت e.target با e.currentTarget چیست، ممکن است کلی باگ بخوری!

همه این مفاهیم را در مقاله فرزند Event Object در جاوااسکریپت کامل توضیح خواهیم داد.

🎯 جمع‌بندی

مدیریت رویدادها مثل گوش دادن به ضربان قلب وب‌سایت است. با یادگیری Event Handling می‌توانی وب‌سایت‌های کاملاً پویا و تعاملی بسازی که دقیقاً همان کاری را انجام دهند که کاربر انتظار دارد.

اما دنیای Eventها بسیار گسترده‌تر است. در این مقاله فقط نقشه راه کلی را ترسیم کردیم. حالا وقتش است که سراغ مقالات فرزند برویم و هر بخش را به‌صورت تخصصی یاد بگیریم.