React to Events

Learning Objectives

• Understand event-driven programming
• Master event listeners and handlers
• Learn keyboard and mouse events
• Handle page lifecycle events
• Apply events to create interactive interfaces

Section 17.1: Introduction to Events

What is an Event?

An event is something that happens on a web page (click, input, load, etc.)

Example: Button Click

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

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

button.addEventListener("click", function() {
    alert("You clicked the button!");
});
</script>

Event Handler vs Event Listener

// Event handler (old way)
button.onclick = function() {
    console.log("clicked");
};

// Event listener (modern way)
button.addEventListener("click", function() {
    console.log("clicked");
});

Section 17.2: The Event Family

Common Events

// Click events
element.addEventListener("click", handler);
element.addEventListener("dblclick", handler);
element.addEventListener("mousedown", handler);
element.addEventListener("mouseup", handler);

// Form events
input.addEventListener("change", handler);
input.addEventListener("input", handler);
form.addEventListener("submit", handler);

// Window events
window.addEventListener("load", handler);
window.addEventListener("resize", handler);
window.addEventListener("scroll", handler);

Event Object

element.addEventListener("click", function(event) {
    console.log(event.type);        // "click"
    console.log(event.target);      // The clicked element
    console.log(event.currentTarget); // The element with the listener
    console.log(event.clientX);     // Mouse X position
    console.log(event.clientY);     // Mouse Y position
});

Section 17.3: Reacting to Keyboard Events

Keyboard Event Types

let input = document.querySelector("input");

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

// Key released
input.addEventListener("keyup", function(event) {
    console.log("Key released:", event.key);
});

// Character entered
input.addEventListener("keypress", function(event) {
    console.log("Character entered");
});

Key Codes

document.addEventListener("keydown", function(event) {
    if (event.key === "Enter") {
        console.log("Enter was pressed");
    }
    if (event.key === "Escape") {
        console.log("Escape was pressed");
    }
    if (event.ctrlKey && event.key === "s") {
        console.log("Ctrl+S pressed");
    }
});

Section 17.4: Reacting to Mouse Events

Mouse Event Types

element.addEventListener("mouseover", function() {
    console.log("Mouse over");
});

element.addEventListener("mouseout", function() {
    console.log("Mouse out");
});

element.addEventListener("mousemove", function(event) {
    console.log("Position:", event.clientX, event.clientY);
});

element.addEventListener("mouseenter", function() {
    console.log("Mouse entered");
});

element.addEventListener("mouseleave", function() {
    console.log("Mouse left");
});

Section 17.5: Reacting to Page Events

Window Load Events

window.addEventListener("load", function() {
    console.log("Page fully loaded");
});

document.addEventListener("DOMContentLoaded", function() {
    console.log("DOM is ready");
});

Page Unload

window.addEventListener("beforeunload", function(event) {
    event.preventDefault();
    return "Are you sure?";
});

Scroll Events

window.addEventListener("scroll", function() {
    console.log("Scroll position:", window.scrollY);
});

Resize Events

window.addEventListener("resize", function() {
    console.log("New width:", window.innerWidth);
});

Section 17.6: Go Farther with Events

Event Delegation

<ul id="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

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

// Single listener handles all items
list.addEventListener("click", function(event) {
    if (event.target.tagName === "LI") {
        console.log("Item clicked:", event.target.textContent);
    }
});
</script>

Removing Event Listeners

function handleClick() {
    console.log("clicked");
}

element.addEventListener("click", handleClick);

// Remove listener
element.removeEventListener("click", handleClick);

Event Propagation

element.addEventListener("click", function(event) {
    event.stopPropagation();  // Stop bubbling
});

element.addEventListener("click", function(event) {
    event.preventDefault();   // Prevent default action
});

Coding Challenges

Challenge 17.1: Counting Clicks

Task: Count and display the number of button clicks

Challenge 17.2: Changing Colors

Task: Change page color when buttons are clicked

Challenge 17.3: A Dessert List

Task: Create a list where items can be added and removed

Challenge 17.4: Interactive Quiz

Task: Create a simple quiz with click interactions

Key Takeaways

✅ addEventListener adds event listeners
✅ Event object contains event information
✅ Different event types: click, keydown, mousemove, etc.
✅ Use event.preventDefault() to prevent defaults
✅ Use event delegation for efficiency
✅ Use event.target to find the element that triggered the event

Quiz Questions

• What's the difference between event handlers and listeners?
• How do you prevent an event's default action?
• What does event.target tell you?
• How do you detect Enter key press?
• What is event delegation?

Next Module: Module 18 - Manipulate Forms