DOM Manipulation

Events are how your web page responds to user actions - clicks, typing, hovering, and more. It's like setting up a listener that waits for something to happen!

Adding Event Listeners:

Basic syntax:

element.addEventListener('event-type', function);

Common Events:

• •'click' - When element is clicked
• •'mouseover' - When mouse enters element
• •'mouseout' - When mouse leaves element
• •'keydown' - When key is pressed
• •'keyup' - When key is released
• •'input' - When input value changes
• •'submit' - When form is submitted
• •'load' - When page/image loads

Examples:

const button = document.getElementById('myButton');
button.addEventListener('click', function() {
  alert('Button clicked!');

});

const input = document.getElementById('username');
input.addEventListener('input', function(event) {
  console.log('New value:', event.target.value);

});

const form = document.getElementById('myForm');
form.addEventListener('submit', function(event) {
  event.preventDefault(); // Stop form from submitting
  console.log('Form submitted!');

});

The Event Object:

Every event handler receives an 'event' object with useful info:

• •event.target - The element that triggered the event
• •event.type - The type of event ('click', 'input', etc.)
• •event.preventDefault() - Stop default behavior
• •event.stopPropagation() - Stop event bubbling

Removing Event Listeners:

element.removeEventListener('click', functionName);

Best Practices:

• •Use meaningful function names
• •Remove listeners when not needed
• •Be careful with 'this' inside handlers
• •Consider event delegation for dynamic content