Events in JavaScript

Learn to handle user interactions with event listeners.

What are Events?

Events are actions that happen in the browser - clicks, key presses, mouse movements, form submissions, and more. JavaScript can detect and respond to these events.

Key Concept: Events make your web pages interactive. They're the bridge between user actions and JavaScript code.

Adding Event Listeners

The addEventListener method is the modern way to handle events.

JavaScript

// Syntax: element.addEventListener(event, callback)

const button = document.querySelector('button');

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

// With arrow function
button.addEventListener('click', () => {
    console.log('Clicked!');
});

Try it yourself

Output

The Event Object

Event handlers receive an event object with useful information about the event.

Try it yourself

// The event object contains useful properties

console.log("Event Object Properties:");
console.log("");

console.log("Common properties:");
console.log("- e.type: Type of event (click, keydown, etc.)");
console.log("- e.target: Element that triggered the event");
console.log("- e.currentTarget: Element with the listener");
console.log("- e.timeStamp: When the event occurred");

console.log("\nMouse event properties:");
console.log("- e.clientX/Y: Mouse position in viewport");
console.log("- e.pageX/Y: Mouse position in document");
console.log("- e.button: Which mouse button (0=left)");

console.log("\nKeyboard event properties:");
console.log("- e.key: The key pressed ('Enter', 'a', etc.)");
console.log("- e.code: Physical key code ('KeyA', 'Enter')");
console.log("- e.shiftKey: Shift key was held");
console.log("- e.ctrlKey: Ctrl key was held");
console.log("- e.altKey: Alt key was held");

console.log("\nMethods:");
console.log("- e.preventDefault(): Stop default behavior");
console.log("- e.stopPropagation(): Stop event bubbling");

Output

Interactive Demo

Try interacting with these elements to see events in action:

Event Bubbling and Capturing

Events propagate through the DOM tree. Understanding this is crucial for complex applications.

Try it yourself

Output

Event Delegation

Instead of adding listeners to many elements, add one to a parent and use the event object to determine the target.

Try it yourself

Output

Preventing Default Behavior

Try it yourself

// Some elements have default behaviors
console.log("Default behaviors that can be prevented:");
console.log("");

console.log("Links (<a>): Navigate to href");
console.log("Forms: Submit and reload page");
console.log("Checkboxes: Toggle checked state");
console.log("Right-click: Show context menu");
console.log("Keyboard shortcuts: Browser shortcuts");

console.log("\n=== Preventing Defaults ===");
console.log("");
console.log("// Stop link navigation");
console.log("link.addEventListener('click', (e) => {");
console.log("    e.preventDefault();");
console.log("    // Handle click with JavaScript");
console.log("});");

console.log("\n// Stop form submission");
console.log("form.addEventListener('submit', (e) => {");
console.log("    e.preventDefault();");
console.log("    // Handle form with JavaScript (AJAX)");
console.log("});");

console.log("\n// Stop right-click menu");
console.log("element.addEventListener('contextmenu', (e) => {");
console.log("    e.preventDefault();");
console.log("    // Show custom menu");
console.log("});");

Output

Removing Event Listeners

Try it yourself

// To remove a listener, you need a reference to the function

console.log("=== Removing Listeners ===");
console.log("");

console.log("// Named function (can be removed)");
console.log("function handleClick() { ... }");
console.log("button.addEventListener('click', handleClick);");
console.log("button.removeEventListener('click', handleClick);");

console.log("\n// Anonymous function (CANNOT be removed!)");
console.log("button.addEventListener('click', () => { ... });");
console.log("// No way to remove this!");

console.log("\n=== One-time Events ===");
console.log("// Use { once: true } for single-use listeners");
console.log("button.addEventListener('click', fn, { once: true });");
console.log("// Automatically removed after first trigger!");

console.log("\n=== AbortController ===");
console.log("// Modern way to remove multiple listeners");
console.log("const controller = new AbortController();");
console.log("element.addEventListener('click', fn, {");
console.log("    signal: controller.signal");
console.log("});");
console.log("controller.abort(); // Removes all listeners");

Output

Challenge: Keyboard Shortcuts

Describe how you would create keyboard shortcuts for a web app. What events would you use? How would you detect modifier keys?

Your solution

// Keyboard shortcut handler example

console.log("=== Keyboard Shortcuts Implementation ===");
console.log("");

console.log("document.addEventListener('keydown', (e) => {");
console.log("    // Ctrl+S: Save");
console.log("    if (e.ctrlKey && e.key === 's') {");
console.log("        e.preventDefault();");
console.log("        console.log('Save!');");
console.log("    }");
console.log("");
console.log("    // Ctrl+Shift+N: New");
console.log("    if (e.ctrlKey && e.shiftKey && e.key === 'N') {");
console.log("        e.preventDefault();");
console.log("        console.log('New!');");
console.log("    }");
console.log("");
console.log("    // Escape: Close modal");
console.log("    if (e.key === 'Escape') {");
console.log("        console.log('Close!');");
console.log("    }");
console.log("});");

console.log("\n=== Tips ===");
console.log("- Use keydown for shortcuts (keyup may be too late)");
console.log("- Always preventDefault to stop browser shortcuts");
console.log("- Check ctrlKey, shiftKey, altKey, metaKey (Mac Cmd)");

Output