JavaScript - Events & addEventListener

Overview

Estimated time: 20–25 minutes

Events allow JavaScript to respond to user actions. addEventListener is the standard way to attach event handlers to elements.

Learning Objectives

• Attach event listeners to DOM elements.
• Understand the event object and event types.

Prerequisites

• JavaScript - DOM Navigation & Collections

Adding Event Listeners

const btn = document.getElementById('myBtn');
btn.addEventListener('click', function(event) {
  alert('Button clicked!');
});

Event Object

btn.addEventListener('click', function(event) {
  console.log(event.type); // 'click'
  console.log(event.target); // element clicked
});

Common Pitfalls

• Forgetting to remove event listeners can cause memory leaks.

Summary

Events are central to interactive web apps. Use addEventListener for flexible, modern event handling.