Events یا رویدادها در جاوااسکریپت، واکنش‌ها و تعاملات کاربر با عناصر HTML را مدیریت می‌کنند.
با استفاده از Event Listenerها می‌توان به کلیک، حرکت ماوس، تایپ، تغییر فرم و سایر رویدادها پاسخ داد.

🔹 1. انواع رویدادهای رایج

• Mouse Events: click, dblclick, mouseover, mouseout, mousemove

• Keyboard Events: keydown, keyup, keypress

• Form Events: submit, change, input, focus, blur

• Window Events: load, resize, scroll

🔹 2. افزودن رویداد با addEventListener

• روش استاندارد و حرفه‌ای برای مدیریت رویدادها

let btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){
  alert("Button clicked!");
});

• می‌توان چند Event Listener روی یک عنصر تعریف کرد

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

🔹 3. حذف رویداد با removeEventListener

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

btn.addEventListener("click", handleClick);

// حذف رویداد
btn.removeEventListener("click", handleClick);

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

🔹 4. دسترسی به رویداد و اطلاعات آن

• پارامتر event اطلاعات کامل رویداد را در اختیار می‌گذارد

btn.addEventListener("click", function(event){
  console.log(event.type);      // نوع رویداد: click
  console.log(event.target);    // عنصر موردنظر
  console.log(event.clientX);   // موقعیت X ماوس
  console.log(event.clientY);   // موقعیت Y ماوس
});

🔹 5. جلوگیری از رفتار پیش‌فرض

• بعضی رویدادها رفتار پیش‌فرض دارند (مثلاً submit فرم)

• با event.preventDefault() می‌توان از اجرای آن جلوگیری کرد

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

🔹 6. رویدادهای فرم

• input → هنگام تایپ در فیلد

• change → تغییر مقدار فیلد و ترک آن

• focus → هنگام فوکوس روی فیلد

• blur → هنگام خروج از فیلد

let username = document.getElementById("username");

username.addEventListener("input", function(){
  console.log("Typing:", this.value);
});

username.addEventListener("blur", function(){
  console.log("Field lost focus");
});

🔹 7. رویدادهای موس

let box = document.getElementById("box");

box.addEventListener("mouseover", () => box.style.backgroundColor = "green");
box.addEventListener("mouseout", () => box.style.backgroundColor = "red");
box.addEventListener("click", () => alert("Box clicked!"));

✅ خلاصه

• Events → واکنش به تعامل کاربر با عناصر HTML

• افزودن: addEventListener

• حذف: removeEventListener

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

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

• انواع رویدادها: Mouse, Keyboard, Form, Window