What is JavaScript? JavaScript Development Environment JavaScript Variables and Data Types Operators in JavaScript Control Structures in JavaScript JavaScript Functions JavaScript Arrays Complete Guide JavaScript Objects and JSON DOM Manipulation Basics Event Handling in JavaScript JavaScript ES6 Features Overview JavaScript Promises and Async Async Await in JavaScript Fetch API and AJAX JavaScript Modules ES6 Local Storage and Session Storage JavaScript Error Handling JavaScript Closures Explained JavaScript Prototypes and Inheritance ES6 Classes in JavaScript JavaScript Template Literals Destructuring Assignment ES6 Spread Operator in JavaScript JavaScript Map and Set JavaScript Symbol Data Type Optional Chaining and Nullish JavaScript Generators JavaScript Proxy and Reflect Web APIs Canvas SVG JavaScript Web Workers

Back to Lessons

Event Handling in JavaScript

April 5, 2026

Event Handling

Respond to user interactions like clicks, keypresses, mouse events.

Event Examples

document.addEventListener("DOMContentLoaded", function() {
    // Page loaded
});

btn.addEventListener("click", function(event) {
    event.preventDefault(); // Stop default action
    console.log(event.target); // Event source
});

input.addEventListener("keyup", function(e) {
    console.log(e.key); // Pressed key
});

Key Points

Event object contains event details.
preventDefault() stops default behavior.
Event bubbling: child -> parent.
stopPropagation() stops bubbling.

Previous Lesson Next Lesson