JavaScript Event Listeners

What is an Event Listener?

An Event Listener is a JavaScript method that waits for a specific user interaction or browser action (like a click, keypress, mouse hover, etc.) to happen on an HTML element and then triggers a function in response.

Types of Event Binding

Type	Description	Multiple Handlers?
Inline HTML Event	Uses HTML attribute like `onclick`
DOM Property	Uses JS like `element.onclick`	(last one overwrites)
`addEventListener()`	Standard JS method to add multiple event listeners

Syntax

element.addEventListener("event", function, useCapture);

event: A string like "click", "keydown", etc.
function: The function to execute when the event occurs.
useCapture: Optional boolean (default: false, use event bubbling).

Examples

Example 1: DOM Property Method (Only One Handler)

Example 2: addEventListener (Multiple Handlers)

Example 3: Dynamic Element Creation (Event Delegation)

Best Practices

Always use addEventListener() — it supports multiple listeners and works with dynamic elements.
Avoid inline HTML event attributes.
Use event delegation when dealing with dynamic elements.