🧠 Comprehensive Guide to JavaScript Events

Explore how addEventListener() empowers interactive web experiences with mouse, keyboard, form, and window events.

Below are examples of different types of events in JavaScript along with code snippets to demonstrate their usage.

Press F12 to open dev tools to see the console outputs.

1️⃣ Mouse Events

Hover or Move Mouse Here

// Example: Click
document.querySelector('#myButton').addEventListener('click', () => {
  console.log('Button clicked!');
});

Press any key on your keyboard!

document.addEventListener('keydown', (event) => {
  console.log(`Key pressed: ${event.key}`);
});

document.querySelector('#myInput').addEventListener('input', (event) => {
  console.log(`Current value: ${event.target.value}`);
});

Try resizing or scrolling the page!

window.addEventListener('resize', () => {
  console.log('Window resized');
});

Output displayed here