What's the difference between onclick attribute and addEventListener?

addEventListener supports multiple handlers per event and removable listeners, while onclick holds only a single handler that each new assignment overwrites.

// onclick - only ONE handler
button.onclick = first;
// Replaces first!
button.onclick = second;

// addEventListener - MULTIPLE handlers
button.addEventListener("click", first);
// Both run!
button.addEventListener("click", second);

Removing handlers:

// addEventListener - can remove specific handler
button.removeEventListener("click", first);

// onclick - can only remove by setting to null
button.onclick = null;

addEventListener options:

button.addEventListener("click", handler, {
    // Remove after first trigger
    once: true,
    // Capture phase (not bubble)
    capture: true,
    // Won't call preventDefault
    passive: true
});