JavaScript Event Listeners

Event listeners are a fundamental concept in JavaScript that allow you to make web pages interactive by responding to user actions and browser events.

What are Event Listeners?

Event listeners are functions that wait for a specific event to occur on a particular HTML element, and then execute a callback function in response. They enable interactive web experiences by allowing JavaScript to "listen" for events like clicks, key presses, or mouse movements.

Basic Syntax

The most common way to add an event listener is using the addEventListener() method:

element.addEventListener(eventType, callbackFunction);

Example: Click Event

<button id="myButton">Click Me!</button>
<p id="output"></p>

<script>
  const button = document.getElementById('myButton');
  const output = document.getElementById('output');
  
  button.addEventListener('click', function() {
    output.textContent = 'Button was clicked!';
  });
</script>

Common Event Types

Mouse Events

// Click event
element.addEventListener('click', handleClick);

// Double click
element.addEventListener('dblclick', handleDoubleClick);

// Mouse enter
element.addEventListener('mouseenter', handleMouseEnter);

// Mouse leave
element.addEventListener('mouseleave', handleMouseLeave);

// Mouse move
element.addEventListener('mousemove', handleMouseMove);

Keyboard Events

// Key down
element.addEventListener('keydown', handleKeyDown);

// Key up
element.addEventListener('keyup', handleKeyUp);

// Key press
element.addEventListener('keypress', handleKeyPress);

Form Events

// Submit event
form.addEventListener('submit', handleSubmit);

// Input change
input.addEventListener('change', handleChange);

// Focus event
input.addEventListener('focus', handleFocus);

// Blur event
input.addEventListener('blur', handleBlur);

Example: Keyboard Events

<input type="text" id="textInput">
<p>You typed: <span id="typedText"></span></p>

<script>
  const textInput = document.getElementById('textInput');
  const typedText = document.getElementById('typedText');
  
  textInput.addEventListener('input', function(event) {
    typedText.textContent = event.target.value;
  });
</script>

Event Object

When an event occurs, the browser creates an event object containing information about the event. This object is passed to the event handler function.

Example: Using Event Object

<div id="clickArea" style="width: 200px; height: 200px; background: lightblue;">
  Click anywhere in this area
</div>
<p>Coordinates: <span id="coordinates"></span></p>

<script>
  const clickArea = document.getElementById('clickArea');
  const coordinates = document.getElementById('coordinates');
  
  clickArea.addEventListener('click', function(event) {
    coordinates.textContent = `X: ${event.clientX}, Y: ${event.clientY}`;
  });
</script>

Event Propagation

Events in JavaScript propagate in two phases:

1. Capturing phase - From the window down to the target element
2. Bubbling phase - From the target element up to the window

You can control which phase the event listener triggers in:

// Bubbling phase (default)
element.addEventListener('click', handler);

// Capturing phase
element.addEventListener('click', handler, true);
// or
element.addEventListener('click', handler, {capture: true});

Example: Event Propagation

<div id="outer" style="padding: 50px; background: lightcoral;">
  <div id="inner" style="padding: 30px; background: lightgreen;">
    Click Me
  </div>
</div>
<p id="propagationOutput"></p>

<script>
  const outer = document.getElementById('outer');
  const inner = document.getElementById('inner');
  const output = document.getElementById('propagationOutput');
  
  // Bubbling phase (default)
  outer.addEventListener('click', function() {
    output.textContent += 'Outer div clicked (bubbling)\n';
  });
  
  inner.addEventListener('click', function() {
    output.textContent += 'Inner div clicked (bubbling)\n';
  });
  
  // Capturing phase
  outer.addEventListener('click', function() {
    output.textContent += 'Outer div clicked (capturing)\n';
  }, true);
  
  inner.addEventListener('click', function() {
    output.textContent += 'Inner div clicked (capturing)\n';
  }, true);
</script>

Event Delegation

Event delegation allows you to attach a single event listener to a parent element that will fire for all descendants matching a selector, even if they're added dynamically.

Example: Event Delegation

<ul id="itemList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
<button id="addButton">Add New Item</button>

<script>
  const itemList = document.getElementById('itemList');
  const addButton = document.getElementById('addButton');
  let itemCount = 3;
  
  // Event delegation - single listener for all list items
  itemList.addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
      event.target.style.textDecoration = 'line-through';
    }
  });
  
  // Add new items dynamically
  addButton.addEventListener('click', function() {
    itemCount++;
    const newItem = document.createElement('li');
    newItem.textContent = `Item ${itemCount}`;
    itemList.appendChild(newItem);
  });
</script>

Removing Event Listeners

To remove an event listener, you need to reference the same function that was used to add it.

Example: Removing Event Listeners

<button id="clickableButton">Click Me</button>
<button id="removeListener">Remove Listener</button>
<p id="clickCount">Click count: 0</p>

<script>
  const clickableButton = document.getElementById('clickableButton');
  const removeListener = document.getElementById('removeListener');
  const clickCount = document.getElementById('clickCount');
  
  let count = 0;
  
  // Define the function separately so we can reference it later
  function handleClick() {
    count++;
    clickCount.textContent = `Click count: ${count}`;
  }
  
  // Add the event listener
  clickableButton.addEventListener('click', handleClick);
  
  // Remove the event listener when the second button is clicked
  removeListener.addEventListener('click', function() {
    clickableButton.removeEventListener('click', handleClick);
    alert('Event listener removed!');
  });
</script>

Complete Example

Here's a complete example demonstrating multiple event listeners:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScript Event Listeners</title>
  <style>
    body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
    .container { margin: 20px 0; padding: 15px; border: 1px solid #ddd; border-radius: 5px; }
    button { padding: 8px 16px; margin: 5px; cursor: pointer; }
    .color-box { width: 100px; height: 100px; background: #f0f0f0; margin: 10px 0; }
    #keyOutput { padding: 10px; background: #f9f9f9; min-height: 20px; }
  </style>
</head>
<body>
  <h1>JavaScript Event Listeners Demo</h1>
  
  <div class="container">
    <h2>Click Events</h2>
    <button id="clickButton">Click Me</button>
    <p id="clickOutput">Button not clicked yet.</p>
  </div>
  
  <div class="container">
    <h2>Mouse Events</h2>
    <div id="mouseArea" class="color-box">Move your mouse here</div>
    <p id="mouseOutput">Mouse events will appear here.</p>
  </div>
  
  <div class="container">
    <h2>Keyboard Events</h2>
    <input type="text" id="keyInput" placeholder="Type something here">
    <p id="keyOutput">Keystrokes will appear here.</p>
  </div>
  
  <div class="container">
    <h2>Event Delegation</h2>
    <ul id="list">
      <li>List Item 1</li>
      <li>List Item 2</li>
      <li>List Item 3</li>
    </ul>
    <button id="addItem">Add New Item</button>
  </div>

  <script>
    // Click event example
    const clickButton = document.getElementById('clickButton');
    const clickOutput = document.getElementById('clickOutput');
    
    clickButton.addEventListener('click', function() {
      clickOutput.textContent = 'Button was clicked!';
    });
    
    // Mouse events example
    const mouseArea = document.getElementById('mouseArea');
    const mouseOutput = document.getElementById('mouseOutput');
    
    mouseArea.addEventListener('mouseenter', function() {
      mouseOutput.textContent = 'Mouse entered the box';
      mouseArea.style.backgroundColor = 'lightblue';
    });
    
    mouseArea.addEventListener('mouseleave', function() {
      mouseOutput.textContent = 'Mouse left the box';
      mouseArea.style.backgroundColor = '#f0f0f0';
    });
    
    // Keyboard events example
    const keyInput = document.getElementById('keyInput');
    const keyOutput = document.getElementById('keyOutput');
    
    keyInput.addEventListener('keyup', function(event) {
      keyOutput.textContent = `You typed: ${event.target.value}`;
    });
    
    // Event delegation example
    const list = document.getElementById('list');
    const addItem = document.getElementById('addItem');
    let itemCount = 3;
    
    list.addEventListener('click', function(event) {
      if (event.target.tagName === 'LI') {
        event.target.style.textDecoration = 'line-through';
      }
    });
    
    addItem.addEventListener('click', function() {
      itemCount++;
      const newItem = document.createElement('li');
      newItem.textContent = `List Item ${itemCount}`;
      list.appendChild(newItem);
    });
  </script>
</body>
</html>

This comprehensive example demonstrates various event listeners in action. You can copy this code into an HTML file and run it in your browser to see all the event listeners working together.