25- آموزش جاوااسکریپت | آموزش رویدادها (Event Listeners)

تا اینجای کار، انتخابگرها، تغییرات استایل، پیمایش و ویرایش عناصر DOM را بررسی کردیم، اما هنوز تعامل واقعی با صفحه وب نداشتیم. رویدادها (Events) کلید ایجاد تعامل هستند. هر عنصری در DOM می‌تواند به رویدادهایی مثل کلیک، حرکت موس، زدن کلید کیبورد و غیره گوش دهد و در پاسخ به آن‌ها عملیاتی را اجرا کند.

۱. اضافه کردن Event Listener

برای گوش دادن به یک رویداد، ابتدا عنصر مورد نظر را انتخاب کرده و از متد addEventListener استفاده می‌کنیم. این متد دو ورودی اصلی می‌گیرد: نوع رویداد (مانند click) و یک تابع (Callback) که پس از رخ دادن رویداد اجرا می‌شود.

document.querySelector('.clear-tasks').addEventListener('click', function() {
    console.log('Hello World');
});

جلوگیری از رفتار پیش‌فرض (preventDefault)

بسیاری از عناصر رفتارهای پیش‌فرض دارند؛ برای مثال، کلیک روی یک لینک باعث انتقال به آدرس جدید می‌شود. برای جلوگیری از این رفتار (مثلاً وقتی می‌خواهیم فقط کد خودمان اجرا شود)، از متد preventDefault روی شیء رویداد استفاده می‌کنیم:

document.querySelector('.clear-tasks').addEventListener('click', function(e) {
    e.preventDefault(); // جلوگیری از ریدایرکت یا رفرش صفحه
    console.log('Hello World');
});

۲. توابع نام‌دار (Named Functions)

به جای نوشتن تابع به صورت مستقیم در داخل addEventListener (تابع بی‌نام)، استفاده از توابع نام‌دار کد را تمیزتر و خواناتر می‌کند:

function onClick(e) {
    console.log('Clicked');
}

document.querySelector('.clear-tasks').addEventListener('click', onClick);

۳. شیء رویداد (Event Object)

وقتی یک رویداد اجرا می‌شود، یک شیء به صورت خودکار به تابع ما ارسال می‌شود که حاوی اطلاعات زیادی درباره آن رویداد است.

• e.target: عنصری که رویداد دقیقاً روی آن رخ داده است (بسیار مهم برای مدیریت رویدادها).
• e.type: نوع رویداد (مثلاً click یا mouseover).
• e.clientX/Y: مختصات رویداد نسبت به پنجره مرورگر.
• e.offsetX/Y: مختصات رویداد نسبت به خودِ عنصر.

مثال کاربردی از target:

document.querySelector('.clear-tasks').addEventListener('click', function(e) {
    // تغییر متن دکمه کلیک شده
    e.target.innerText = 'Hello';
    
    // دریافت کلاس‌های عنصر
    console.log(e.target.classList);
});

۴. انواع دیگر رویدادها

علاوه بر click، رویدادهای بسیار متنوعی وجود دارند. برای مثال، می‌توانید نوع رویداد را به mouseover تغییر دهید تا به محض رفتن موس روی عنصر، عملیات اجرا شود. در آموزش‌های بعدی به جزئیات بیشتری درباره رویدادهای کیبورد و ورودی‌ها (Input Events) خواهیم پرداخت.