27- آموزش جاوااسکریپت | آموزش کار با رویدادهای فرم و ورودی (Input Form Events)

در این بخش، پس از بررسی رویدادهای موس، به سراغ مدیریت فرم‌ها و رویدادهای مربوط به فیلدهای ورودی می‌رویم. این رویدادها برای ساخت فرم‌های تعاملی و ثبت اطلاعات کاربر ضروری هستند.

مدیریت ارسال فرم (Submit)

اولین قدم، انتخاب فرم و گوش دادن به رویداد submit است. برای جلوگیری از ریدایرکت شدن صفحه که رفتار پیش‌فرض مرورگر هنگام ارسال فرم است، از preventDefault() استفاده می‌کنیم.

const form = document.querySelector('form');
const taskInput = document.getElementById('task');

form.addEventListener('submit', runEvent);

function runEvent(e) {
    // جلوگیری از ارسال فرم به آدرس اکشن (ریدایرکت نشدن صفحه)
    e.preventDefault();
    
    console.log(`Event Type: ${e.type}`);
    
    // دریافت مقدار وارد شده در اینپوت
    console.log(taskInput.value);
    
    // پاک کردن مقدار اینپوت پس از ارسال
    taskInput.value = '';
}

رویدادهای کیبورد (Keyboard Events)

این رویدادها زمانی که کاربر در فیلدهای متنی تایپ می‌کند، اجرا می‌شوند:

• keydown: لحظه فشردن کلید (قبل از نمایش کاراکتر).
• keyup: لحظه رها کردن کلید.
• keypress: رویداد کلی فشردن کلید.

مثال: نمایش لحظه‌ای تایپ کاربر در هدر صفحه

const heading = document.querySelector('h5');

taskInput.addEventListener('keydown', function(e) {
    // دریافت مقدار تایپ شده به صورت زنده
    heading.innerText = e.target.value;
});

رویدادهای Focus و Blur

این دو رویداد برای مدیریت ورود و خروج کاربر به یک فیلد استفاده می‌شوند:

• focus: زمانی که کاربر روی فیلد کلیک می‌کند تا تایپ را شروع کند.
• blur: زمانی که کاربر از فیلد خارج می‌شود (کلیک در جای دیگر صفحه).

taskInput.addEventListener('focus', runEvent);
taskInput.addEventListener('blur', runEvent);

رویدادهای Clipboard (برش و کپی)

گاهی نیاز است عملیات‌هایی مانند کپی، کات یا پیست را کنترل کنید:

taskInput.addEventListener('cut', runEvent);
taskInput.addEventListener('paste', runEvent);

رویدادهای عمومی (Input و Change)

• input: این رویداد «همه کاره» است و با هر نوع تغییری در اینپوت (تایپ، کات، پیست) اجرا می‌شود.
• change: معمولاً برای لیست‌های کشویی (<select>) استفاده می‌شود و زمانی اجرا می‌شود که مقدار انتخاب شده تغییر کند.

// رویداد input (برای همه تغییرات)
taskInput.addEventListener('input', runEvent);

// رویداد change (برای select list)
const select = document.querySelector('select');
select.addEventListener('change', runEvent);

در این آموزش، با نحوه تعامل با فرم‌ها و کنترل دقیق فیلدهای ورودی آشنا شدیم. در بخش بعدی به سراغ مبحث مهم «حباب‌سازی رویداد» (Event Bubbling) و «نمایندگی رویداد» (Event Delegation) خواهیم رفت.