JavaScript DOM Event Listeners

Syntax

• event: event name like "click", "mouseover".
• function: callback executed on event.
• useCapture (optional): boolean for event phase (default false).

Example 1: Add a Click Event Listener

Example 2: Mouseover and Mouseout Events

Example 3: Keyboard Event Listener

Removing an Event Listener

Use removeEventListener() to detach an event handler:

Note: Use a named function, not an anonymous function, to remove properly.

Key Takeaways

• Use addEventListener() to attach multiple event handlers to elements.
• It keeps HTML and JavaScript separate for better maintainability.
• Use removeEventListener() to remove handlers when no longer needed.
• Common events: click, dblclick, mouseover, mouseout, keyup, keydown, submit.