Understanding the Event Object

Every event handler function receives an event object as a parameter, which holds detailed information about the triggered event—like mouse position, key pressed, or target element.

📦 Example: Accessing the Event Object

document.addEventListener("click", function(event) {
    console.log(event); // Logs the entire event object
});

🎯 Common Event Object Properties

• event.type – the type of event (e.g., "click", "keydown")
• event.target – the element that triggered the event
• event.currentTarget – the element the event listener is attached to
• event.clientX / clientY – mouse position on the screen
• event.key – the key pressed (for keyboard events)
• event.preventDefault() – prevents default behavior
• event.stopPropagation() – stops event from bubbling up

🔍 Example: Using `event.target`

document.querySelector("ul").addEventListener("click", function(e) {
    console.log("You clicked on:", e.target.tagName);
});

🚫 Preventing Default Action

Used to stop things like form submission, link redirection, etc.

document.querySelector("form").addEventListener("submit", function(e) {
    e.preventDefault(); // Stops form from submitting
    alert("Form intercepted!");
});

🚧 Stopping Propagation

Use this when you don’t want an event to bubble up to parent elements.

button.addEventListener("click", function(e) {
    e.stopPropagation();
    console.log("Button clicked without bubbling up");
});