Events: Basics (ইভেন্ট)

const btn = document.getElementById("saveBtn");

btn.addEventListener("click", () => {
  console.log("বাটন চাপা হয়েছে!");
});

// ক্লিক
btn.addEventListener("click", handler);

// ফর্ম submit
form.addEventListener("submit", (e) => {
  e.preventDefault();         // পাতার reload আটকানো
  console.log("সাবমিট");
});

// keyboard — চেপে ছেড়ে দিলে
input.addEventListener("keyup", (e) => {
  console.log("চাপা key:", e.key);
});

// input-এর মান বদলে
input.addEventListener("input", () => {
  console.log(input.value);
});

btn.addEventListener("click", (event) => {
  console.log(event.type);       // "click"
  console.log(event.target);     // যা চাপা পড়েছে
  console.log(event.clientX, event.clientY); // মাউস-এর অবস্থান
});

box.addEventListener("mouseenter", () => console.log("মাউস ভেতরে ঢুকেছে"));
box.addEventListener("mouseleave", () => console.log("বেরিয়ে গেছে"));
box.addEventListener("dblclick", () => console.log("ডাবল ক্লিক"));

document.addEventListener("mousemove", (e) => {
  const pos = `${e.clientX}, ${e.clientY}`;
  coords.textContent = pos;
});

document.addEventListener("keydown", (e) => {
  if (e.key === "Escape") {
    modal.classList.add("hidden");  // Esc চেপে বন্ধ
  }
});

// shortcut — Ctrl+S
if (e.ctrlKey && e.key.toLowerCase() === "s") {
  e.preventDefault();
  save();
}

<!-- পুরনো পদ্ধতি (এড়িয়ে চলুন) -->
<button onclick="doSomething()">চাপুন</button>

<!-- আধুনিক: JS-এ রেজিস্টার -->
<button id="btn">চাপুন</button>
<script>
  const btn = document.getElementById("btn");
  btn.addEventListener("click", () => {
    console.log("modern way");
  });
</script>