Now, let's move to the the next topic:

🖱️ JavaScript Events

Events are actions performed by the user or the browser.

Examples
• Clicking a button
• Typing in input
• Submitting a form
• Pressing a key
• Page loading

JavaScript listens to these events and responds.

🧠 Why Events Matter

Without events
• No button clicks
• No form submission handling
• No real interactivity

Events = user + JavaScript talking to each other 🤝

🎧 Event Listener Concept

JavaScript listens for an event and runs a function.

Syntax: element.addEventListener("event", function);

🖱️ Click Event

HTML:
<button id="btn">Click Me</button>

JavaScript:
const btn = document.getElementById("btn");
btn.addEventListener("click", () => {
console.log("Button clicked");
});

Use cases:
• Toggle theme
• Open modal
• Submit action

⌨️ Input Event
Triggered when user types.

HTML:
<input type="text" id="name" />

JavaScript:

const input = document.getElementById("name");
input.addEventListener("input", () => {
console.log(input.value);
});

Use cases:
• Live validation
• Search suggestions

📤 Submit Event
Used for forms.
HTML:
<form id="myForm"> <input type="email" /> <button>Submit</button>
</form>

JavaScript:

const form = document.getElementById("myForm");
form.addEventListener("submit", (e) => {
e.preventDefault();
console.log("Form submitted");
});

⚠️ preventDefault() stops page reload.

⌨️ Keyboard Events
Common types:
• keydown
• keyup

Example:
document.addEventListener("keydown", (e) => {
console.log(e.key);
});

Use cases:
• Shortcuts
• Game controls

🧩 Event Object
Event object gives details.

Common properties:
• e.target
• e.type
• e.key
btn.addEventListener("click", (e) => {
console.log(e.target);
});

⚠️ Common Beginner Mistakes
• Forgetting preventDefault()
• Using inline HTML events
• Attaching event before DOM loads
• Using wrong event type

🧪 Mini Practice Task
• Add click event to change text
• Show live input value
• Prevent form submission reload
• Detect key press


✅ Mini Practice Task – Solution
🖱️ JavaScript Events

🟦 1️⃣ Add click event to change text

HTML
<h2 id="text">Hello</h2> <button id="btn">Change Text</button>

JavaScript

const text = document.getElementById("text");
const btn = document.getElementById("btn");
btn.addEventListener("click", () => {
text.textContent = "Text changed!";
});

✔️ Text updates on button click

🟩 2️⃣ Show live input value

HTML
<input type="text" id="inputBox" /> <p id="output"></p>

JavaScript

const input = document.getElementById("inputBox");
const output = document.getElementById("output");
input.addEventListener("input", () => {
output.textContent = input.value;
});

✔️ Text updates as user types

🟥 3️⃣ Prevent form submission reload

HTML
<form id="myForm"> <input type="email" required /> <button>Submit</button> </form>

JavaScript

const form = document.getElementById("myForm");
form.addEventListener("submit", (e) => {
e.preventDefault();
console.log("Form submitted without reload");
});

✔️ Page does not refresh

⌨️ 4️⃣ Detect key press

JavaScript

document.addEventListener("keydown", (e) => {
console.log("Key pressed:", e.key);
});

✔️ Logs pressed key in console

🧠 What you learned
• Handling click events
• Real-time input tracking
• Form control
• Keyboard event handling


➡️ Double Tap ♥️ For More