JavaScript Events

Capture user actions and create interactive experiences.

bubblingcapturingdelegation

Intro
What is an Event?
Common Events
Handling Events (3 Ways)
Button Click Example
Mouse Events Example
Keyboard Events Example
Form Submit Event
Event Object
Visual Understanding
Event Bubbling
Best Practices
When to Use Events
Interview Q&A
MCQ

JavaScript Events Tutorial (Beginner -> Practical)

Events in JavaScript are actions that happen in the browser, such as clicking a button, typing in a field, or moving the mouse. JavaScript lets you detect these actions and respond to them.

1. What is an Event?

An event is something that happens on a web page. Examples: click, key press, mouse movement, and form submit.

2. Common Events

Event	Description
`click`	When user clicks an element
`dblclick`	Double click
`mouseover`	Mouse enters element
`mouseout`	Mouse leaves element
`keydown`	Key is pressed
`keyup`	Key is released
`submit`	Form is submitted
`change`	Input value changes

3. Handling Events (3 Ways)

1. Inline Event (Basic)

<button onclick="sayHello()">Click</button>

<script>
function sayHello() {
    alert("Hello!");
}
</script>

Simple but not recommended for large projects.

2. Using DOM Property

let btn = document.getElementById("btn");

btn.onclick = function() {
    console.log("Clicked!");
};

3. Using addEventListener() (Best Practice)

let btn = document.getElementById("btn");

btn.addEventListener("click", function() {
    console.log("Button clicked");
});

4. Example: Button Click

<button id="btn">Click Me</button>
<p id="text"></p>

<script>
document.getElementById("btn").addEventListener("click", function() {
    document.getElementById("text").innerText = "Button Clicked!";
});
</script>

5. Mouse Events Example

<p id="box">Hover over me</p>

<script>
let box = document.getElementById("box");

box.addEventListener("mouseover", function() {
    box.style.color = "red";
});

box.addEventListener("mouseout", function() {
    box.style.color = "black";
});
</script>

Hover over me

6. Keyboard Events Example

<input type="text" id="input">

<script>
document.getElementById("input").addEventListener("keyup", function() {
    console.log("Key pressed");
});
</script>

7. Form Submit Event

<form id="form">
    <input type="text" placeholder="Enter name">
    <button type="submit">Submit</button>
</form>

<script>
document.getElementById("form").addEventListener("submit", function(e) {
    e.preventDefault(); // stop page reload
    console.log("Form submitted");
});
</script>

8. Event Object

Every event provides an object with details.

document.addEventListener("click", function(event) {
    console.log(event.target); // clicked element
});

9. Visual Understanding

Think of events as flow: User Action -> Browser Event -> JavaScript Handler -> UI Update.

10. Event Bubbling (Important Concept)

document.getElementById("child").addEventListener("click", function() {
    console.log("Child clicked");
});

document.getElementById("parent").addEventListener("click", function() {
    console.log("Parent clicked");
});

Parent

Child (Click Me)

Clicking child triggers both child and parent due to bubbling.

11. Best Practices

Use addEventListener() instead of inline events.
Keep JavaScript separate from HTML.
Use e.preventDefault() for forms when needed.
Write clean and reusable event handlers.

12. When to Use Events

Events are used to handle user interactions, build interactive UI, validate forms, and create dynamic behavior.