HTML - Events

Overview

Estimated time: 25–35 minutes

HTML allows inline event attributes, but best practice is to attach listeners in JavaScript. Always ensure keyboard accessibility.

Example

<button id="save">Save</button>
<script>
  const btn = document.getElementById('save');
  btn.addEventListener('click', () => alert('Saved!'));
  // Keyboard is handled by button natively; for custom elements, handle keydown Enter/Space
</script>

Common Pitfalls

• Using onclick inline everywhere—harder to maintain.
• Not providing keyboard interaction on non-native clickable elements.