Form Events

رویدادهای اختصاصی فرم: submit، reset، change و input

علاوه بر رویدادهای عمومی مثل click، فرم و فیلدهای آن مجموعه‌ای از رویدادهای اختصاصی دارند که برای مدیریت ارسال، پاک‌سازی و تغییر مقدار فیلدها طراحی شده‌اند. شناخت دقیق تفاوت این رویدادها، به‌ویژه change و input، برای پیاده‌سازی فرم‌های واکنش‌گرا و اعتبارسنجی سمت کلاینت ضروری است.

رویداد submit و مدیریت ارسال فرم

رویداد submit روی خود عنصر form رخ می‌دهد، نه روی دکمه‌ی ارسال؛ این رویداد زمانی فعال می‌شود که کاربر دکمه‌ی نوع submit را بزند یا در یک فیلد متنی کلید Enter را فشار دهد. از آنجا که رفتار پیش‌فرض مرورگر در این حالت، بارگذاری مجدد صفحه است، تقریباً همیشه لازم است این رفتار پیش‌فرض متوقف شود:

// HTML فرضی:
// <form id="loginForm">
//   <input name="username" required>
//   <button type="submit">ورود</button>
// </form>

const form = document.getElementById("loginForm");

form.addEventListener("submit", (event) => {
  event.preventDefault(); // جلوگیری از بارگذاری مجدد صفحه

  const username = form.elements.username.value.trim();

  if (username === "") {
    console.log("نام کاربری نمی‌تواند خالی باشد");
    return;
  }

  console.log(`فرم با نام کاربری "${username}" آماده‌ی ارسال است`);
});

فراخوانی event.preventDefault() در اینجا صرفاً از رفرش صفحه جلوگیری می‌کند و هیچ ارتباطی با انتشار رویداد ندارد؛ در صورت نیاز به متوقف‌کردن Bubbling رویداد submit، باید جداگانه از stopPropagation() استفاده کرد.

رویداد reset

رویداد reset نیز روی عنصر form رخ می‌دهد و زمانی فعال می‌شود که کاربر دکمه‌ای از نوع reset را بزند. این رویداد پیش از خالی‌شدن واقعی فیلدها اجرا می‌شود، به همین دلیل امکان لغو آن با preventDefault() نیز وجود دارد، هرچند در عمل کاربرد کمتری نسبت به submit دارد.

تفاوت کلیدی میان change و input

این دو رویداد اغلب با هم اشتباه گرفته می‌شوند، در حالی که زمان فعال‌شدن آن‌ها کاملاً متفاوت است:

ویژگی	input	change
زمان فعال‌شدن	بلافاصله با هر تغییر مقدار	پس از خارج شدن فوکوس از فیلد و تأیید تغییر
مناسب برای فیلد متنی	نمایش زنده‌ی شمارش کاراکتر، جستجوی زنده	اعتبارسنجی نهایی پس از اتمام تایپ
رفتار در select و checkbox	معمولاً هم‌زمان با change رخ می‌دهد	بلافاصله پس از انتخاب گزینه‌ی جدید

برای فیلدهای متنی، تفاوت این دو رویداد کاملاً محسوس است: اگر کاربر در یک input تایپ کند، رویداد input به ازای هر حرف اجرا می‌شود، اما رویداد change فقط زمانی اجرا می‌شود که فیلد فوکوس خود را از دست بدهد و مقدار آن نسبت به قبل تغییر کرده باشد.

const search = document.querySelector('input[name="search"]');

search.addEventListener("input", () => {
  console.log("در حال تایپ:", search.value);
});

search.addEventListener("change", () => {
  console.log("تایپ تمام شد، مقدار نهایی:", search.value);
});

نکات کلیدی

• رویداد submit روی عنصر form رخ می‌دهد، نه روی دکمه‌ی ارسال.
• بدون فراخوانی preventDefault() در رویداد submit، مرورگر صفحه را مجدداً بارگذاری می‌کند.
• رویداد input بلافاصله و با هر تغییر مقدار اجرا می‌شود؛ change فقط پس از خروج فوکوس فعال می‌شود.
• برای فیلدهایی مثل select و checkbox، رفتار change نزدیک‌تر به رفتار input در فیلدهای متنی است.

جمع‌بندی

رویدادهای اختصاصی فرم مثل submit و reset امکان مدیریت دقیق لحظه‌ی ارسال و پاک‌سازی فرم را فراهم می‌کنند، در حالی که input و change برای واکنش به تغییرات مقدار فیلدها استفاده می‌شوند. انتخاب درست میان این دو رویداد، بسته به نیاز پروژه—نمایش زنده یا اعتبارسنجی نهایی—تأثیر مستقیمی بر تجربه‌ی کاربری فرم دارد. در درس بعدی، نحوه‌ی اعتبارسنجی کامل فرم پیش از ارسال بررسی خواهد شد.