Event Listeners in JavaScript

JavaScript uses event listeners to react to user actions like clicking, typing, scrolling, and more. You can attach functions to elements that run when events happen.

🎯 Basic Syntax

element.addEventListener("event", callbackFunction);

🖱 Example: Click Event

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

💡 Using Named Functions

function greetUser() {
    console.log("Hello!");
}

document.querySelector("button").addEventListener("click", greetUser);

⌨️ Other Common Events

• click – mouse click
• mouseover / mouseout – hover effects
• keydown / keyup – keyboard input
• submit – form submission
• change – form field value change

✅ Removing Event Listeners

function sayHi() {
    alert("Hi!");
}

const btn = document.getElementById("btn");
btn.addEventListener("click", sayHi);

// Later, remove the event
btn.removeEventListener("click", sayHi);

📦 Example With HTML

<button id="myBtn">Click Me</button>

<script>
document.getElementById("myBtn").addEventListener("click", () => {
    alert("Event triggered!");
});
</script>