JavaScript Events

🎯 Introduction to Events

Events are actions or occurrences that happen in the browser, such as clicks, key presses, or page loads. JavaScript can detect these events and execute code in response.

JavaScript Editor

// Basic Event Handling
console.log("=== BASIC EVENT HANDLING ===");

// Get or create button
let button = document.getElementById('demo-button');
if (!button) {
  button = document.createElement('button');
  button.id = 'demo-button';
  button.textContent = 'Click Me!';
  button.style.padding = '10px 20px';
  button.style.margin = '10px';
  document.body.appendChild(button);
}

// Method 1: Inline event handler (not recommended)
button.onclick = function() {
  console.log("Button clicked via onclick!");
  this.style.backgroundColor = '#4caf50';
  this.style.color = 'white';
};

// Method 2: addEventListener (recommended)
button.addEventListener('click', function(event) {
  console.log("Button clicked via addEventListener!");
  console.log("Event type:", event.type);
  console.log("Target:", event.target);
  console.log("Current target:", event.currentTarget);
  console.log("Event phase:", event.eventPhase); // 2 = bubbling
  
  // Change button appearance
  this.textContent = 'Clicked!';
  this.style.backgroundColor = '#2196f3';
  
  // Create feedback element
  const feedback = document.createElement('div');
  feedback.textContent = 'Button was clicked at: ' + new Date().toLocaleTimeString();
  feedback.style.padding = '10px';
  feedback.style.margin = '10px';
  feedback.style.backgroundColor = '#e3f2fd';
  feedback.style.border = '1px solid #2196f3';
  
  // Remove previous feedback
  const oldFeedback = document.getElementById('click-feedback');
  if (oldFeedback) {
    oldFeedback.remove();
  }
  
  feedback.id = 'click-feedback';
  button.insertAdjacentElement('afterend', feedback);
});

// Mouse events
button.addEventListener('mouseenter', function() {
  console.log("Mouse entered button");
  this.style.boxShadow = '0 4px 8px rgba(0,0,0,0.2)';
  this.style.transform = 'translateY(-2px)';
});

button.addEventListener('mouseleave', function() {
  console.log("Mouse left button");
  this.style.boxShadow = 'none';
  this.style.transform = 'translateY(0)';
});

button.addEventListener('mousedown', function() {
  console.log("Mouse down on button");
  this.style.transform = 'scale(0.95)';
});

button.addEventListener('mouseup', function() {
  console.log("Mouse up on button");
  this.style.transform = 'scale(1)';
});

// Double click
button.addEventListener('dblclick', function() {
  console.log("Double clicked!");
  this.textContent = 'Double Clicked!';
  this.style.backgroundColor = '#ff9800';
});

Common Event Types:

Mouse Events: click, dblclick, mousedown, mouseup
Keyboard Events: keydown, keyup, keypress
Form Events: submit, change, focus, blur
Window Events: load, resize, scroll

Event Handler Methods:

addEventListener() - Recommended method
onclick - Inline property (limited)
element.onclick = function() - DOM property

📋 The 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.

JavaScript Editor

// Event Object Properties
console.log("=== EVENT OBJECT ===");

// Create interactive area
const eventArea = document.createElement('div');
eventArea.id = 'event-area';
eventArea.innerHTML = `
  <h3 style="color: #333;">Event Information Area</h3>
  <p>Click, move mouse, or press keys in this area</p>
  <div style="height: 150px; background: #f0f0f0; border: 2px dashed #666; 
              padding: 20px; margin: 10px 0;">
    Interactive Zone
  </div>
  <input type="text" placeholder="Type here..." style="padding: 8px; width: 200px;">
`;

eventArea.style.padding = '20px';
eventArea.style.backgroundColor = '#fff';
eventArea.style.border = '1px solid #ddd';
eventArea.style.margin = '20px 0';
document.body.appendChild(eventArea);

const interactiveZone = eventArea.querySelector('div');
const textInput = eventArea.querySelector('input');

// Click event with event object
interactiveZone.addEventListener('click', function(event) {
  console.log("\n=== CLICK EVENT ===");
  console.log("Type:", event.type);
  console.log("Target:", event.target.tagName);
  console.log("Current Target:", event.currentTarget.tagName);
  console.log("Event Phase:", event.eventPhase);
  console.log("Bubbles:", event.bubbles);
  console.log("Cancelable:", event.cancelable);
  console.log("Default Prevented:", event.defaultPrevented);
  console.log("Timestamp:", event.timeStamp);
  console.log("X, Y (relative to viewport):", event.clientX, event.clientY);
  console.log("Page X, Y:", event.pageX, event.pageY);
  console.log("Screen X, Y:", event.screenX, event.screenY);
  console.log("Button:", event.button); // 0 = left, 1 = middle, 2 = right
  
  // Show coordinates in element
  this.innerHTML += `
    <div style="background: #e3f2fd; padding: 5px; margin-top: 10px;">
      Click at: ${event.clientX}, ${event.clientY}
    </div>
  `;
});

// Mouse move event
interactiveZone.addEventListener('mousemove', function(event) {
  const coords = document.getElementById('mouse-coords');
  if (!coords) {
    const coordDiv = document.createElement('div');
    coordDiv.id = 'mouse-coords';
    coordDiv.style.position = 'fixed';
    coordDiv.style.top = '10px';
    coordDiv.style.right = '10px';
    coordDiv.style.backgroundColor = 'rgba(0,0,0,0.7)';
    coordDiv.style.color = 'white';
    coordDiv.style.padding = '5px 10px';
    coordDiv.style.borderRadius = '3px';
    coordDiv.style.fontSize = '12px';
    document.body.appendChild(coordDiv);
  }
  
  document.getElementById('mouse-coords').textContent = 
    `Mouse: ${event.clientX}, ${event.clientY}`;
});

// Keyboard events
textInput.addEventListener('keydown', function(event) {
  console.log("\n=== KEYDOWN ===");
  console.log("Key:", event.key);
  console.log("Code:", event.code);
  console.log("Key Code (deprecated):", event.keyCode);
  console.log("Ctrl:", event.ctrlKey);
  console.log("Shift:", event.shiftKey);
  console.log("Alt:", event.altKey);
  console.log("Meta:", event.metaKey);
  console.log("Repeat:", event.repeat);
});

textInput.addEventListener('keyup', function(event) {
  console.log("\n=== KEYUP ===");
  console.log("Key released:", event.key);
});

textInput.addEventListener('keypress', function(event) {
  console.log("\n=== KEYPRESS ===");
  console.log("Character:", event.key);
});

// Prevent default behavior
textInput.addEventListener('keydown', function(event) {
  if (event.key === 'Enter') {
    event.preventDefault();
    console.log("Enter key pressed - default prevented");
    this.value = 'Enter was pressed!';
  }
});

// Context menu (right-click)
interactiveZone.addEventListener('contextmenu', function(event) {
  event.preventDefault();
  console.log("\nContext menu prevented");
  alert("Right-click menu was prevented!");
});

Common Properties:

type - Event type (click, keydown, etc.)
target - Element that triggered event
currentTarget - Element with listener
clientX/clientY - Mouse coordinates

Keyboard Properties:

key - Character value
code - Physical key code
ctrlKey/shiftKey/altKey - Modifier keys

Event Methods:

preventDefault() - Prevent default action
stopPropagation() - Stop event flow
stopImmediatePropagation() - Stop all handlers

🌊 Event Flow: Bubbling & Capturing

Events in the DOM have three phases: capturing, target, and bubbling. Understanding this flow is crucial for complex event handling.

JavaScript Editor

// Event Flow: Bubbling and Capturing
console.log("=== EVENT FLOW ===");

// Create nested elements
const bubbleContainer = document.createElement('div');
bubbleContainer.id = 'bubble-container';
bubbleContainer.innerHTML = `
  <div class="outer" style="padding: 40px; background: #e3f2fd; margin: 20px;">
    Outer Div
    <div class="middle" style="padding: 30px; background: #c8e6c9; margin: 20px;">
      Middle Div
      <div class="inner" style="padding: 20px; background: #ffecb3; margin: 20px;">
        Inner Div (Click Me)
      </div>
    </div>
  </div>
  <div style="margin-top: 20px; padding: 10px; background: #f5f5f5;">
    <label>
      <input type="checkbox" id="stop-propagation"> Stop Propagation
    </label>
    <label style="margin-left: 20px;">
      <input type="checkbox" id="prevent-default"> Prevent Default
    </label>
  </div>
`;

document.body.appendChild(bubbleContainer);

const outer = bubbleContainer.querySelector('.outer');
const middle = bubbleContainer.querySelector('.middle');
const inner = bubbleContainer.querySelector('.inner');
const stopPropCheck = document.getElementById('stop-propagation');
const preventDefaultCheck = document.getElementById('prevent-default');

// Capturing phase (true = capturing, false = bubbling)
outer.addEventListener('click', function(event) {
  console.log("CAPTURING: Outer div (phase:", event.eventPhase, ")");
}, true);

middle.addEventListener('click', function(event) {
  console.log("CAPTURING: Middle div (phase:", event.eventPhase, ")");
}, true);

inner.addEventListener('click', function(event) {
  console.log("CAPTURING: Inner div (phase:", event.eventPhase, ")");
}, true);

// Bubbling phase (default)
outer.addEventListener('click', function(event) {
  console.log("BUBBLING: Outer div (phase:", event.eventPhase, ")");
  if (stopPropCheck.checked) {
    event.stopPropagation();
    console.log("Propagation stopped at outer");
  }
});

middle.addEventListener('click', function(event) {
  console.log("BUBBLING: Middle div (phase:", event.eventPhase, ")");
  if (stopPropCheck.checked) {
    event.stopPropagation();
    console.log("Propagation stopped at middle");
  }
});

inner.addEventListener('click', function(event) {
  console.log("BUBBLING: Inner div (phase:", event.eventPhase, ")");
  
  if (preventDefaultCheck.checked) {
    event.preventDefault();
    console.log("Default prevented");
  }
  
  if (stopPropCheck.checked) {
    event.stopPropagation();
    console.log("Propagation stopped at inner");
  }
  
  console.log("\nEvent flow order:");
  console.log("1. Capturing phase (outer → middle → inner)");
  console.log("2. Target phase (inner)");
  console.log("3. Bubbling phase (inner → middle → outer)");
});

// Add click counter
let clickCount = 0;
inner.addEventListener('click', function() {
  clickCount++;
  this.textContent = `Clicked ${clickCount} times`;
});

Event Flow Phases:

Capturing Phase: Window → Document → ... → Parent
Target Phase: Event reaches target element
Bubbling Phase: Target → Parent → ... → Window

Flow Control Methods:

stopPropagation() - Stops event flow
stopImmediatePropagation() - Stops all handlers
preventDefault() - Prevents default action

🎪 Event Delegation Pattern

Event delegation is a technique where you attach a single event listener to a parent element instead of multiple listeners to child elements. This is more efficient and works with dynamically added elements.

JavaScript Editor

// Event Delegation Pattern
console.log("=== EVENT DELEGATION ===");

// Create dynamic list
const listContainer = document.createElement('div');
listContainer.id = 'list-container';
listContainer.innerHTML = `
  <h3 style="color: #333;">Dynamic Item List</h3>
  <button id="add-item">Add New Item</button>
  <button id="remove-item">Remove Last Item</button>
  <ul id="item-list" style="list-style: none; padding: 0; margin-top: 20px;">
    <li class="list-item" data-id="1">Item 1 <button class="delete-btn">Delete</button></li>
    <li class="list-item" data-id="2">Item 2 <button class="delete-btn">Delete</button></li>
    <li class="list-item" data-id="3">Item 3 <button class="delete-btn">Delete</button></li>
  </ul>
  <div id="event-log" style="margin-top: 20px; padding: 10px; background: #f5f5f5; 
                           min-height: 100px; font-family: monospace; font-size: 12px;">
    Event Log:
  </div>
`;

listContainer.style.padding = '20px';
listContainer.style.backgroundColor = 'white';
listContainer.style.border = '1px solid #ddd';
listContainer.style.margin = '20px 0';
document.body.appendChild(listContainer);

const itemList = document.getElementById('item-list');
const addButton = document.getElementById('add-item');
const removeButton = document.getElementById('remove-item');
const eventLog = document.getElementById('event-log');
let itemId = 4;

// Log function
function logEvent(message) {
  const time = new Date().toLocaleTimeString();
  eventLog.innerHTML += `[${time}] ${message}<br>`;
  eventLog.scrollTop = eventLog.scrollHeight;
}

// ❌ BAD PRACTICE: Adding listener to each item individually
// This doesn't work for dynamically added items
const initialItems = itemList.querySelectorAll('.list-item');
initialItems.forEach(item => {
  item.addEventListener('click', function() {
    logEvent(`Item ${this.dataset.id} clicked (individual listener)`);
  });
});

// ✅ GOOD PRACTICE: Event delegation (single listener on parent)
itemList.addEventListener('click', function(event) {
  // Check if click was on a list item
  const listItem = event.target.closest('.list-item');
  if (listItem) {
    event.stopPropagation(); // Prevent bubbling to window
    logEvent(`Item ${listItem.dataset.id} clicked (event delegation)`);
    listItem.style.backgroundColor = '#e3f2fd';
    
    // Remove highlight after 1 second
    setTimeout(() => {
      listItem.style.backgroundColor = '';
    }, 1000);
  }
  
  // Check if click was on delete button
  if (event.target.classList.contains('delete-btn')) {
    const itemToRemove = event.target.closest('.list-item');
    if (itemToRemove) {
      logEvent(`Deleting item ${itemToRemove.dataset.id}`);
      itemList.removeChild(itemToRemove);
    }
    event.stopPropagation(); // Prevent item click event
  }
});

// Add new item
addButton.addEventListener('click', function() {
  const newItem = document.createElement('li');
  newItem.className = 'list-item';
  newItem.dataset.id = itemId;
  newItem.innerHTML = `Item ${itemId} <button class="delete-btn">Delete</button>`;
  newItem.style.padding = '10px';
  newItem.style.borderBottom = '1px solid #eee';
  newItem.style.display = 'flex';
  newItem.style.justifyContent = 'space-between';
  newItem.style.alignItems = 'center';
  
  itemList.appendChild(newItem);
  logEvent(`Added item ${itemId}`);
  itemId++;
});

// Remove last item
removeButton.addEventListener('click', function() {
  const lastItem = itemList.lastElementChild;
  if (lastItem) {
    logEvent(`Removed item ${lastItem.dataset.id}`);
    itemList.removeChild(lastItem);
  }
});

// Window events
window.addEventListener('click', function() {
  logEvent("Window clicked (event bubbled up)");
});

// Keyboard event delegation
document.addEventListener('keydown', function(event) {
  if (event.ctrlKey && event.key === 'a') {
    event.preventDefault();
    logEvent("Ctrl+A pressed - selecting all items");
    // Select all items logic would go here
  }
  
  if (event.key === 'Escape') {
    logEvent("Escape pressed - clearing highlights");
    const items = itemList.querySelectorAll('.list-item');
    items.forEach(item => {
      item.style.backgroundColor = '';
    });
  }
});

logEvent("Event delegation demo ready. Try clicking items and buttons!");

✅ Event Delegation Benefits:

Performance: Single listener instead of many
Memory: Less memory usage
Dynamic Content: Works with elements added later
Cleaner Code: Centralized event handling

📋 Event Reference

Mouse Events:

click - Single click
dblclick - Double click
mousedown - Button pressed
mouseup - Button released
mousemove - Mouse moved
mouseenter - Enter element
mouseleave - Leave element

Keyboard Events:

keydown - Key pressed
keyup - Key released
keypress - Character input

Form Events:

submit - Form submitted
change - Input value changed
input - Input value changing
focus - Element focused
blur - Element lost focus

Window Events:

load - Page loaded
resize - Window resized
scroll - Page scrolled
beforeunload - Before page unload

← DOM Manipulation Forms & Validation →

Frontend

JavaScript & Frameworks

Backend

Artificial Intelligence

Database

CSS Frameworks

Data Analytics

Digital Marketing

Frontend

Backend

Artificial Intelligence

DevOps

Database

Cyber Security

JavaScript Tutorial

JavaScript Events

🎯 Introduction to Events

Common Event Types:

Event Handler Methods:

📋 The Event Object

Common Properties:

Keyboard Properties:

Event Methods:

🌊 Event Flow: Bubbling & Capturing

Event Flow Phases:

Flow Control Methods:

🎪 Event Delegation Pattern

✅ Event Delegation Benefits:

📋 Event Reference

Mouse Events:

Keyboard Events:

Form Events:

Window Events:

Follow Us

Our Tools

Our Company

Special Tools