Explain DOM manipulation and event handling. What are event delegation, bubbling, and capturing?

Explain DOM manipulation and event handling. What are event delegation, bubbling, and capturing?

DOM manipulation involves interacting with HTML elements, and event handling manages user interactions.

Basic DOM Manipulation:

// Selecting elements
const element = document.getElementById('myId');
const elements = document.querySelectorAll('.myClass');
const firstElement = document.querySelector('.myClass');

// Creating elements
const newDiv = document.createElement('div');
newDiv.textContent = 'Hello World';
newDiv.className = 'my-class';
newDiv.setAttribute('data-id', '123');

// Appending elements
document.body.appendChild(newDiv);
element.insertBefore(newDiv, element.firstChild);

// Modifying content
element.innerHTML = '<p>New content</p>';
element.textContent = 'Plain text content';
element.style.color = 'red';
element.classList.add('active');
element.classList.remove('inactive');
element.classList.toggle('visible');

Event Handling:

// Basic event listener
element.addEventListener('click', function(event) {
  console.log('Element clicked:', event.target);
});

// Event delegation
document.addEventListener('click', function(event) {
  if (event.target.matches('.button')) {
    console.log('Button clicked:', event.target);
  }
});

// Event bubbling and capturing
// Bubbling (default): event goes from target to root
// Capturing: event goes from root to target

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

Event Delegation:

// Instead of adding listeners to each button
const buttons = document.querySelectorAll('.button');
buttons.forEach(button => {
  button.addEventListener('click', handleClick);
});

// Use event delegation (more efficient)
document.addEventListener('click', function(event) {
  if (event.target.classList.contains('button')) {
    handleClick(event);
  }
});

// Dynamic content example
document.addEventListener('click', function(event) {
  if (event.target.matches('.delete-btn')) {
    const item = event.target.closest('.item');
    item.remove();
  }
});

Event Bubbling and Capturing:

// HTML: <div id="parent"><button id="child">Click me</button></div>

const parent = document.getElementById('parent');
const child = document.getElementById('child');

// Capturing phase (parent -> child)
parent.addEventListener('click', () => console.log('Parent capturing'), true);
child.addEventListener('click', () => console.log('Child capturing'), true);

// Bubbling phase (child -> parent)
child.addEventListener('click', () => console.log('Child bubbling'), false);
parent.addEventListener('click', () => console.log('Parent bubbling'), false);

// Clicking child outputs:
// Parent capturing
// Child capturing
// Child bubbling
// Parent bubbling

// Stop propagation
child.addEventListener('click', (event) => {
  event.stopPropagation(); // Prevents bubbling
  console.log('Child clicked, propagation stopped');
});