🎯 JavaScript Events & Event Listeners

Events happen all the time in the browser — clicks, typing, mouse moves, you name it. You can listen and react to these with event listeners to make your page interactive.

📚 Example: Click Event Listener

// Select the button and listen for clicks
const btn = document.getElementById('myButton');
btn.addEventListener('click', () => {
  console.log('Button clicked!');
  document.getElementById('output1').innerText = 'Button was clicked 🎉';
});

Click the button after running the code.

⌨️ Example: Keyboard Event Listener

// Listen for key presses on the whole document
document.addEventListener('keydown', (event) => {
  console.log('Key pressed:', event.key);
  document.getElementById('output2').innerText = `You pressed: ${event.key}`;
});

Press any key after running the code.

🖱️ Example: Mouseover Event

// Change text when hovering over this box
const box = document.getElementById('hoverBox');
box.addEventListener('mouseover', () => {
  box.style.backgroundColor = '#90caf9';
  box.innerText = 'Mouse is over me!';
});
box.addEventListener('mouseout', () => {
  box.style.backgroundColor = '#e3f2fd';
  box.innerText = 'Hover over me!';
});

Hover over me!

⚡ Quick Tips

Use element.addEventListener(event, handler) to listen for events.
Common events: click, keydown, mouseover, submit, etc.
Event objects give you info about the event, like which key was pressed or mouse position.
Remove listeners with removeEventListener if needed.
Use event delegation for dynamic content to optimize performance.