JavaScript Events and Event Handling

What are Events?

Events are actions or occurrences that happen in the browser — user clicks, key presses, page load, form submissions, etc. JavaScript can respond to these events through event handlers.

Ways to Handle Events

// 1. HTML attribute (inline — not recommended)
// <button onclick="handleClick()">Click</button>

// 2. DOM property
const btn = document.getElementById("myBtn");
btn.onclick = function() { alert("Clicked!"); };

// 3. addEventListener (preferred — supports multiple handlers)
btn.addEventListener("click", function(event) {
    console.log("Button clicked!");
    console.log(event.target); // The clicked element
});

// Arrow function style
btn.addEventListener("click", (e) => {
    e.preventDefault(); // prevent default behavior
    console.log("Arrow handler");
});

// Remove listener
const handler = () => console.log("removed");
btn.addEventListener("click", handler);
btn.removeEventListener("click", handler);

Common Event Types

Event Object

document.addEventListener("keydown", (e) => {
    console.log(e.key);        // "Enter", "a", etc.
    console.log(e.keyCode);    // 13, 65, etc.
    console.log(e.ctrlKey);    // true if Ctrl held
    console.log(e.shiftKey);   // true if Shift held
});

document.addEventListener("click", (e) => {
    console.log(e.clientX, e.clientY);  // mouse position
    console.log(e.target);              // element clicked
    console.log(e.currentTarget);       // element with listener
});

Event Propagation

// Bubbling: event travels from child UP to parent (default)
// Capturing: event travels from parent DOWN to child

document.getElementById("parent").addEventListener("click", () => {
    console.log("Parent clicked");
}, false); // false = bubbling phase (default)

document.getElementById("child").addEventListener("click", (e) => {
    console.log("Child clicked");
    e.stopPropagation(); // stop bubbling to parent
});

Event Delegation

// Instead of adding listener to each button:
document.getElementById("list").addEventListener("click", (e) => {
    if (e.target.tagName === "LI") {
        e.target.classList.toggle("selected");
    }
});
// Works even for dynamically added items!

Form Event Example

const form = document.getElementById("loginForm");
form.addEventListener("submit", (e) => {
    e.preventDefault();     // stop form from reloading page
    const email = document.getElementById("email").value;
    const pass = document.getElementById("password").value;
    if (email && pass) {
        console.log("Logging in:", email);
    }
});

Key Takeaway: Always use addEventListener for event handling. Understand event bubbling and use e.preventDefault() to stop default browser actions. Event delegation improves performance for lists and dynamic content.