JavaScript Events and Event Handling

JavaScript Events and Event Handling

Events are actions that happen in the browser — a user clicking a button, typing in a field, moving the mouse, or the page finishing loading. JavaScript lets you listen for these events and respond to them. This is how you make web pages interactive.

Adding Event Listeners

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

button.addEventListener('click', function(event) {
  console.log('Button clicked!');
  console.log(event.target); // the element that was clicked
});

// Arrow function syntax
button.addEventListener('click', (e) => {
  e.target.textContent = 'Clicked!';
});

Common Event Types

// Mouse events
element.addEventListener('click', handler);
element.addEventListener('dblclick', handler);
element.addEventListener('mouseover', handler);
element.addEventListener('mouseout', handler);

// Keyboard events
document.addEventListener('keydown', (e) => {
  console.log('Key pressed:', e.key);
});

// Form events
const form = document.querySelector('form');
form.addEventListener('submit', (e) => {
  e.preventDefault(); // stop the default form submission
  console.log('Form submitted');
});

const input = document.querySelector('input');
input.addEventListener('input', (e) => {
  console.log('Current value:', e.target.value);
});

Event Delegation

Instead of attaching listeners to every child element, attach one listener to their parent. The event bubbles up from the child to the parent, where you can check which element triggered it.

const list = document.querySelector('#task-list');

list.addEventListener('click', (e) => {
  if (e.target.tagName === 'LI') {
    e.target.classList.toggle('completed');
  }
});

Removing Event Listeners

function handleClick() {
  console.log('Clicked once!');
  button.removeEventListener('click', handleClick);
}

const button = document.querySelector('#btn');
button.addEventListener('click', handleClick);