Events ও Event Handling

Event কী?

Event হলো ব্যবহারকারী বা browser এর ঘটনা — click, hover, key press, page load ইত্যাদি।

Event Listener যোগ করা

// সেরা পদ্ধতি: addEventListener ⭐
let btn = document.getElementById("myBtn");

btn.addEventListener("click", function(event) {
    console.log("Button clicked!");
    console.log(event);  // event object
});

// Arrow function
btn.addEventListener("click", (e) => {
    console.log(e.target);  // কোন element-এ click হয়েছে
});

// পুরনো পদ্ধতি (এড়িয়ে চলুন)
btn.onclick = function() { ... };
<button onclick="myFunc()">...</button>

Common Events

// Mouse
element.addEventListener("click", fn);
element.addEventListener("dblclick", fn);
element.addEventListener("mouseover", fn);
element.addEventListener("mouseout", fn);
element.addEventListener("mousemove", fn);

// Keyboard
document.addEventListener("keydown", (e) => {
    console.log(e.key);       // "a", "Enter", "ArrowUp"
    console.log(e.code);       // "KeyA"
    if (e.key === "Escape") closeModal();
});

// Form
form.addEventListener("submit", (e) => {
    e.preventDefault();  // default submit বন্ধ
    // validation/AJAX
});

input.addEventListener("input", (e) => {
    console.log(e.target.value);
});

input.addEventListener("change", fn);
input.addEventListener("focus", fn);
input.addEventListener("blur", fn);

// Window/Document
window.addEventListener("load", fn);
window.addEventListener("scroll", fn);
window.addEventListener("resize", fn);

document.addEventListener("DOMContentLoaded", () => {
    // HTML লোড শেষ, images অপেক্ষা করে না
});

Event Object (বিস্তারিত)

btn.addEventListener("click", function(e) {
    e.target          // কোন element-এ click হয়েছে
    e.currentTarget   // যে element-এ listener লাগানো
    e.type            // "click"
    e.clientX, e.clientY  // mouse position

    e.preventDefault();   // default বন্ধ (form submit, link)
    e.stopPropagation();  // bubble বন্ধ
});

Event Delegation (পারফরমেন্স)

// ১০০টি li থাকলে প্রত্যেকটাতে listener না লাগিয়ে parent-এ একটি
document.querySelector("ul").addEventListener("click", (e) => {
    if (e.target.tagName === "LI") {
        console.log("Clicked:", e.target.textContent);
    }
});

বাস্তব উদাহরণ: Todo App

const input = document.getElementById("taskInput");
const btn = document.getElementById("addBtn");
const list = document.getElementById("taskList");

btn.addEventListener("click", () => {
    const text = input.value.trim();
    if (!text) return;

    const li = document.createElement("li");
    li.textContent = text;
    li.addEventListener("click", () => li.remove());
    list.appendChild(li);
    input.value = "";
});

input.addEventListener("keydown", (e) => {
    if (e.key === "Enter") btn.click();
});