EventListener ابزاری حرفه‌ای در جاوااسکریپت برای مدیریت رویدادها است.
با استفاده از آن می‌توان به تعاملات کاربر با عناصر HTML پاسخ داد و رفتارهای دلخواه را اجرا کرد.

🔹 1. افزودن EventListener

• روش استاندارد و حرفه‌ای برای اضافه کردن رویداد به عنصر

let btn = document.getElementById("myBtn");

btn.addEventListener("click", function() {
  alert("Button clicked!");
});

• مزیت: می‌توان چند EventListener روی یک عنصر تعریف کرد بدون اینکه قبلی حذف شود

btn.addEventListener("mouseover", function() {
  btn.style.backgroundColor = "blue";
});

btn.addEventListener("mouseout", function() {
  btn.style.backgroundColor = "red";
});

🔹 2. پارامتر Event

• تابع EventListener می‌تواند پارامتر event دریافت کند

• اطلاعات مفید: نوع رویداد، عنصر هدف، موقعیت ماوس و غیره

btn.addEventListener("click", function(event) {
  console.log("Event Type:", event.type);
  console.log("Target Element:", event.target);
});

🔹 3. حذف EventListener

• برای حذف EventListener باید تابع نام‌گذاری شده باشد، نمی‌توان از تابع ناشناس استفاده کرد

function handleClick() {
  alert("Clicked!");
}

btn.addEventListener("click", handleClick);

// حذف EventListener
btn.removeEventListener("click", handleClick);

🔹 4. Event Listener با گزینه‌ها

• سومین پارامتر addEventListener می‌تواند options باشد

btn.addEventListener("click", function() {
  alert("Button clicked once!");
}, { once: true }); // اجرا فقط یک بار

• گزینه‌های رایج:

  • capture → شنود رویداد در فاز capturing

  • once → اجرا فقط یک بار

  • passive → مشخص می‌کند رویداد preventDefault ندارد

🔹 5. نمونه‌های کاربردی

Mouse Event

let box = document.getElementById("box");
box.addEventListener("mouseover", () => box.style.backgroundColor = "green");
box.addEventListener("mouseout", () => box.style.backgroundColor = "red");

Keyboard Event

document.addEventListener("keydown", function(event) {
  console.log("Key pressed:", event.key);
});

Form Event

let form = document.getElementById("myForm");
form.addEventListener("submit", function(event) {
  event.preventDefault();
  alert("Form submitted!");
});

✅ خلاصه

• EventListener → راه استاندارد برای مدیریت رویدادها

• افزودن: addEventListener(event, handler, options)

• حذف: removeEventListener(event, handler)

• دسترسی به اطلاعات رویداد: پارامتر event

• می‌توان چند EventListener روی یک عنصر داشت

• گزینه‌ها: once, capture, passive