آموزش جامع رویدادها در جاوااسکریپت

🎯 اهداف یادگیری

مفهوم رویدادها در جاوااسکریپت را درک کنید
انواع مختلف رویدادها را بشناسید
روش‌های مختلف مدیریت رویدادها را یاد بگیرید
با رویدادهای ماوس، صفحه‌کلید و فرم‌ها آشنا شوید

📌 رویداد (Event) چیست؟

رویدادها اتفاقاتی هستند که در صفحه وب رخ می‌دهند و می‌توانیم با جاوااسکریپت به آن‌ها واکنش نشان دهیم:

javascript

            // وقتی کاربر روی دکمه کلیک کند
document.getElementById('myButton').addEventListener('click', function() {
  alert('دکمه کلیک شد!');
});

            

انواع رویدادها:

رویدادهای ماوس: click, dblclick, mouseover, mouseout و ...
رویدادهای صفحه‌کلید: keydown, keyup, keypress
رویدادهای فرم: submit, change, focus, blur

📌 روش‌های مدیریت رویدادها

1. استفاده از ویژگی HTML (Inline Events)

html

            <button onclick="alert('کلیک شد!')">کلیک کنید</button>

2. استفاده از ویژگی DOM (روش قدیمی)

javascript

            document.getElementById('myButton').onclick = function() {
  alert('کلیک شد!');
};

3. استفاده از addEventListener (روش مدرن و توصیه شده)

javascript

            document.getElementById('myButton').addEventListener('click', function() {
  alert('کلیک شد!');
});

مزایای addEventListener:

چندین رویداد: می‌توانید چندین listener برای یک رویداد اضافه کنید
کنترل بهتر: می‌توانید رویدادها را حذف کنید (removeEventListener)
گزینه‌های پیشرفته: مثل استفاده از capture یا passive

📌 رویدادهای رایج و کاربردی

رویدادهای ماوس:

javascript

            // کلیک
element.addEventListener('click', function() {/* ... */});
// دابل کلیک
element.addEventListener('dblclick', function() {/* ... */});
// وقتی موس روی عنصر قرار می‌گیرد
element.addEventListener('mouseover', function() {/* ... */});
// وقتی موس از روی عنصر خارج می‌شود
element.addEventListener('mouseout', function() {/* ... */});

            

رویدادهای صفحه‌کلید:

javascript

            // وقتی کلیدی فشار داده می‌شود
document.addEventListener('keydown', function(event) {
  console.log('کلید فشار داده شد:', event.key);
});
// وقتی کلید رها می‌شود
document.addEventListener('keyup', function(event) {
  console.log('کلید رها شد:', event.key);
});

            

رویدادهای فرم:

javascript

            // ارسال فرم
document.getElementById('myForm').addEventListener('submit', function(event) {
  event.preventDefault(); // جلوگیری از ارسال فرم
  console.log('فرم ارسال شد!');
});
// تغییر مقدار فیلد
document.getElementById('myInput').addEventListener('change', function() {
  console.log('مقدار فیلد تغییر کرد!');
});

            

📌 شیء Event و ویژگی‌های مهم

وقتی رویدادی اتفاق می‌افتد، یک شیء Event به تابع مدیریت رویداد پاس داده می‌شود که حاوی اطلاعات مفیدی است:

javascript

            document.addEventListener('click', function(event) {
  // نوع رویداد
  console.log(event.type); // "click"
  // عنصر هدف
  console.log(event.target); // عنصری که روی آن کلیک شده
  // مختصات کلیک
  console.log(event.clientX, event.clientY); // مختصات X و Y
  // جلوگیری از رفتار پیش‌فرض
  event.preventDefault();
  // توقف انتشار رویداد به عناصر والد
  event.stopPropagation();
});

            

ویژگی‌های مهم شیء Event:

ویژگی	توضیح
event.type	نوع رویداد (مثل 'click')
event.target	عنصری که رویداد روی آن اتفاق افتاده
event.currentTarget	عنصری که listener به آن متصل شده
event.preventDefault()	جلوگیری از رفتار پیش‌فرض رویداد
event.stopPropagation()	توقف انتشار رویداد به عناصر والد

📌 انتشار رویداد (Event Bubbling و Capturing)

رویدادها در DOM در سه فاز حرکت می‌کنند:

فاز Capturing: از بالاترین عنصر والد به سمت عنصر هدف
فاز Target: رسیدن به عنصر هدف
فاز Bubbling: از عنصر هدف به سمت بالاترین عنصر والد

javascript

            // استفاده از فاز Capturing (پارامتر سوم true)
document.getElementById('parent').addEventListener('click', function() {
  console.log('Parent clicked (Capturing)');
}, true);
// استفاده از فاز Bubbling (پارامتر سوم false یا حذف شده)
document.getElementById('child').addEventListener('click', function() {
  console.log('Child clicked (Bubbling)');
});

            

تفاوت Bubbling و Capturing:

Bubbling	Capturing
پیش‌فرض در addEventListener	نیاز به تنظیم پارامتر سوم به true دارد
رویداد از عنصر هدف به سمت والدین حرکت می‌کند	رویداد از والدین به سمت عنصر هدف حرکت می‌کند
برای اکثر موارد استفاده مناسب است	برای موارد خاص مثل اعتبارسنجی قبل از رسیدن به هدف

📌 تمرین عملی

یک فرم ثبت نام ساده ایجاد کنید و رویدادهای زیر را برای آن پیاده‌سازی کنید:

html

            <form id="registerForm">
  <input type="text" id="username" placeholder="نام کاربری">
  <input type="password" id="password" placeholder="رمز عبور">
  <button type="submit">ثبت نام</button>
</form>

            

راهنمای تمرین:

با استفاده از رویداد submit از ارسال فرم جلوگیری کنید
با استفاده از رویداد focus و blur روی فیلدها، اعتبارسنجی انجام دهید
با استفاده از رویداد keyup روی فیلد رمز عبور، قدرت رمز را بررسی کنید
با استفاده از رویداد click روی دکمه، یک پیام نمایش دهید

📌 قدم بعدی

در درس بعدی با اعتبارسنجی فرم‌ها در جاوااسکریپت آشنا خواهیم شد!

❮ قبلی بعدی ❯