Advanced Event Handling

Event listeners provide a more powerful and flexible way to handle events compared to traditional event handlers.

With addEventListener(), you can attach multiple event handlers to the same element and event type, and easily remove them when needed.

The event object passed to listener functions contains useful information about the event, such as which element triggered it and keyboard/mouse details.

// Basic addEventListener syntax
element.addEventListener('click', function() {
  console.log('Clicked!');
});

// Using named functions (can be removed later)
function handleClick() {
  console.log('Button clicked');
}
element.addEventListener('click', handleClick);

// Remove event listener
element.removeEventListener('click', handleClick);

// Event object
element.addEventListener('click', function(event) {
  console.log('Event type:', event.type);
  console.log('Target element:', event.target);
  console.log('Mouse X:', event.clientX);
  console.log('Mouse Y:', event.clientY);
});

// Prevent default behavior
link.addEventListener('click', function(event) {
  event.preventDefault();
  console.log('Link click prevented');
});

// Multiple listeners on same element
button.addEventListener('click', firstFunction);
button.addEventListener('click', secondFunction);

• addEventListener() - Attach event handler to element
• removeEventListener() - Remove previously attached handler
• event.target - The element that triggered the event
• event.type - Type of event (click, keydown, etc.)
• event.preventDefault() - Stop default browser behavior
• event.stopPropagation() - Stop event from bubbling up
• Multiple listeners - Can add many handlers to same event

<div class="listener-demo">
  <button id="multiBtn">Button with Multiple Listeners</button>

  <form id="myForm">
    <input type="text" id="username" placeholder="Username" required>
    <button type="submit">Submit</button>
  </form>

  <div id="clickArea">
    Click anywhere in this box
    <button id="innerBtn">Button Inside</button>
  </div>

  <div id="log"></div>
</div>