⚙️ Lesson 18: Events & Interactivity

Events are actions or occurrences that happen in the browser - like clicking a button, typing in a form, or moving the mouse. JavaScript allows you to respond to these events to create interactive experiences.

What are Events?

Events occur when users interact with your page:

Click: User clicks an element
Hover: User moves mouse over element
Submit: User submits a form
Input: User types in an input field
Load: Page finishes loading
Scroll: User scrolls the page

Adding Event Listeners

Method 1: Inline (Not Recommended)

Add events directly in HTML:

<button onclick="greet()">Click me</button>

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

Method 2: Direct Assignment

const button = document.getElementById("myButton");

button.onclick = function() {
    console.log("Button clicked!");
};
        

Method 3: addEventListener() (Best Practice)

Modern and flexible way to handle events:

const button = document.getElementById("myButton");

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

// Or with arrow function
button.addEventListener("click", () => {
    console.log("Button clicked!");
});
        

Common Events

Event	Description	Example
click	Element is clicked	button.addEventListener("click", handler)
mouseover	Mouse enters element	element.addEventListener("mouseover", handler)
mouseout	Mouse leaves element	element.addEventListener("mouseout", handler)
submit	Form is submitted	form.addEventListener("submit", handler)
change	Select/input value changes	input.addEventListener("change", handler)
keydown/keyup	Key is pressed/released	input.addEventListener("keydown", handler)
blur	Element loses focus	input.addEventListener("blur", handler)
focus	Element gains focus	input.addEventListener("focus", handler)
load	Page/image finishes loading	window.addEventListener("load", handler)
scroll	Page is scrolled	window.addEventListener("scroll", handler)

Event Object

Event handlers receive an event object with information about what happened:

button.addEventListener("click", function(event) {
    console.log(event.type);      // "click"
    console.log(event.target);    // The element clicked
    console.log(event.pageX);     // Mouse X position
    console.log(event.pageY);     // Mouse Y position
});
        

Interactive Examples

Click Events

Click the button to see the event in action

Mouse Events

Hover over me!

Input Events

Type something:

You've typed: nothing yet

Form Events

Event Delegation

Listen for events on a parent element for all children. Useful for dynamic elements:

// Listen on parent
document.getElementById("list").addEventListener("click", function(event) {
    if (event.target.tagName === "LI") {
        console.log("List item clicked: " + event.target.textContent);
    }
});
        

Preventing Default Behavior

Stop default actions with preventDefault():

// Prevent form submission
document.getElementById("form").addEventListener("submit", function(event) {
    event.preventDefault();
    console.log("Form submitted via JavaScript");
});

// Prevent link navigation
document.querySelector("a").addEventListener("click", function(event) {
    event.preventDefault();
    console.log("Link click prevented");
});
        

Useful Event Properties

Property	Description
event.type	Type of event (click, submit, etc.)
event.target	Element that triggered the event
event.currentTarget	Element with the event listener
event.preventDefault()	Stop default behavior
event.stopPropagation()	Stop event bubbling up
event.pageX / pageY	Mouse position on page
event.key	Key pressed (for keyboard events)

Complete Example: Interactive Counter

Counter: 0

Best Practices for Events

Use addEventListener() instead of inline events
Remove unnecessary event listeners to avoid memory leaks
Use event delegation for dynamic content
Always handle edge cases (null checks, validation)
Use meaningful function names for event handlers
Keep event handlers focused on one task
Test events with different browsers

Key Takeaways

Events are user interactions (click, hover, submit, etc.)
Use addEventListener() to handle events
The event object contains information about what happened
Use preventDefault() to stop default behavior
Event delegation is useful for dynamic content
Create interactive, responsive web applications with events

← Back to Course | ← Previous