DOM DOM Events

// Basic keyboard event handling
input.addEventListener('keydown', (e) => {
  // Prevent default behavior (e.g., form submission)
  if (e.key === 'Enter') {
    e.preventDefault();
  }
  
  // Check for modifier keys
  if (e.ctrlKey && e.key === 's') {
    e.preventDefault();
    console.log('Save shortcut pressed!');
  }
  
  // Handle special keys
  if (e.code.startsWith('Arrow')) {
    console.log('Arrow key pressed:', e.key);
  }
});
            

// 1. Basic try-catch with error logging
button.addEventListener('click', (e) => {
  try {
    // Simulate an error
    throw new Error('Something went wrong!');
  } catch (error) {
    console.error('Error caught:', error);
    errorResult.textContent = `Error: ${error.message}`;
  }
});

// 2. Async error handling
asyncButton.addEventListener('click', async (e) => {
  try {
    const result = await fetchData();
    // Handle success
  } catch (error) {
    console.error('Async error:', error);
    asyncErrorResult.textContent = `Failed to fetch data: ${error.message}`;
  }
});

// 3. Custom error types
class ValidationError extends Error {
  constructor(message: string) {
    super(message);
    this.name = 'ValidationError';
  }
}

validateButton.addEventListener('click', (e) => {
  try {
    const age = parseInt(ageInput.value);
    if (isNaN(age) || age < 1 || age > 100) {
      throw new ValidationError('Age must be between 1 and 100');
    }
    validationErrorResult.textContent = 'Valid age!';
    validationErrorResult.style.backgroundColor = '#e8f5e9';
    validationErrorResult.style.color = '#2e7d32';
  } catch (error) {
    if (error instanceof ValidationError) {
      validationErrorResult.textContent = `Validation Error: ${error.message}`;
      validationErrorResult.style.backgroundColor = '#ffebee';
      validationErrorResult.style.color = '#c62828';
    } else {
      validationErrorResult.textContent = `Unexpected Error: ${error.message}`;
      validationErrorResult.style.backgroundColor = '#ffebee';
      validationErrorResult.style.color = '#c62828';
    }
  }
});
            

// 1. Event Throttling
function throttle(func: Function, limit: number) {
  let inThrottle: boolean;
  return function(...args: any[]) {
    if (!inThrottle) {
      func.apply(this, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  }
}

// 2. Event Delegation with Accessibility
const list = document.getElementById('delegationList');
list?.addEventListener('click', (e) => {
  const target = e.target as HTMLElement;
  if (target.matches('li')) {
    // Handle click with accessibility in mind
    target.setAttribute('aria-selected', 'true');
    target.focus();
  }
});

// 3. Performance Monitoring
// (Example only — runtime demo below is guarded)
// const observer = new PerformanceObserver((list) => {
//   for (const entry of list.getEntries()) {
//     console.log('Performance:', entry);
//     // Log to monitoring service
//   }
// });

// observer.observe({ entryTypes: ['event'] });
            

// 1. Real-time Validation with Accessibility
const username = document.getElementById('username') as HTMLInputElement;
const usernameError = document.getElementById('username-error');

username?.addEventListener('input', (e) => {
  const value = (e.target as HTMLInputElement).value;
  if (value.length < 3) {
    usernameError!.textContent = 'Username must be at least 3 characters';
    username.setAttribute('aria-invalid', 'true');
  } else {
    usernameError!.textContent = '';
    username.setAttribute('aria-invalid', 'false');
  }
});

// 2. Custom Validation
const password = document.getElementById('password') as HTMLInputElement;
const requirements = {
  length: document.getElementById('length'),
  uppercase: document.getElementById('uppercase'),
  lowercase: document.getElementById('lowercase'),
  number: document.getElementById('number')
};

password?.addEventListener('input', (e) => {
  const value = (e.target as HTMLInputElement).value;
  requirements.length!.classList.toggle('valid', value.length >= 8);
  requirements.uppercase!.classList.toggle('valid', /[A-Z]/.test(value));
  requirements.lowercase!.classList.toggle('valid', /[a-z]/.test(value));
  requirements.number!.classList.toggle('valid', /[0-9]/.test(value));
});

// 3. Form Submission with Validation
form?.addEventListener('submit', async (e) => {
  e.preventDefault();
  if (!form.checkValidity()) {
    form.reportValidity();
    return;
  }
  
  try {
    const formData = new FormData(form);
    const response = await fetch('/api/submit', {
      method: 'POST',
      body: formData
    });
    // Handle response
  } catch (error) {
    // Handle error
  }
});
            

// 1. Basic Event Delegation
const list = document.getElementById('dynamicList');
list?.addEventListener('click', (e) => {
  const target = e.target as HTMLElement
  if (target.matches('li')) {
    // Handle click with accessibility
    target.setAttribute('aria-selected', 'true');
    target.focus();
  }
});

// 2. Nested Event Delegation
const nestedDemo = document.getElementById('nestedDemo');
nestedDemo?.addEventListener('click', (e) => {
  const target = e.target as HTMLElement
  const closest = target.closest('[role="button"]');
  if (closest) {
    // Handle click with event phase information
    const phase = e.eventPhase;
    const result = document.getElementById('nestedResult');
    result!.textContent = `Clicked ${closest.className} in ${phase} phase`;
  }
});

// 3. Touch Event Delegation
const touchDemo = document.getElementById('touchDemo');
touchDemo?.addEventListener('touchstart', (e) => {
  const target = e.target as HTMLElement;
  if (target.matches('.touchable')) {
    // Handle touch with proper event handling
    e.preventDefault(); // Prevent scrolling
    target.classList.add('active');
  }
}, { passive: false });