JavaScript Event Listeners and Event Object

Event Listeners allow you to execute JavaScript when users interact with your web page (e.g., click, hover, input). The Event Object gives you details about the event — like which element triggered it or what key was pressed.



1. What is an Event Listener?

An event listener waits for a specific user interaction (like a click), then runs a function.

Syntax:

element.addEventListener("event", function);


2. Click Event Example

<button id="btn">Click Me</button>
<script>
document.getElementById("btn").addEventListener("click", function ()
{
alert("Button clicked!");
});
</script>

This listens for a click and shows an alert.



3. Mouseover Example

document.getElementById("btn").addEventListener("mouseover", function
() {
console.log("Mouse is over the button!");
});


4. Event Object Explained

When an event is triggered, an event object is automatically passed to the function. It contains useful info like:

  • event.type – The type of event (e.g., "click")
  • event.target – The HTML element that triggered the event
  • event.clientX / clientY – Mouse coordinates
  • event.key – The key pressed (for keyboard events)


Example: Using Event Object

<input id="name" placeholder="Type something..." />
<script>
document.getElementById("name").addEventListener("input", function
(e) {
console.log("You typed:", e.target.value);
});
</script>


5. Keyboard Event Example

document.addEventListener("keydown", function (event) {
console.log("Key pressed:", event.key);
});


6. Removing an Event Listener

function greet() {
alert("Hello!");
}
const btn = document.getElementById("btn");
btn.addEventListener("click", greet);
// Later, you can remove it:
btn.removeEventListener("click", greet);


7. Event Delegation Example

Useful when you want to handle events for multiple elements efficiently.

<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<script>
document.getElementById("list").addEventListener("click", function
(e) {
if (e.target.tagName === "LI") {
alert("You clicked " + e.target.textContent);
}
});
</script>


Real-World Use Cases

  • Form validation (submit, input)
  • Dynamic UI updates (click, change)
  • Key controls in games (keydown, keyup)
  • Navigation, modals, dropdowns, etc.