JavaScript HTML DOM Event Listener

The addEventListener() method is the modern and preferred way to handle events in JavaScript. It allows you to attach an event handler to an element without overwriting existing event handlers.

Syntax

element.addEventListener(event, function, useCapture);

• event: The name of the event (e.g., "click" or "mousedown"). Notice it's not "onclick".
• function: The code we want to run when the event happens.
• useCapture: (Optional) A boolean specifying whether to use event bubbling or capturing.

Why addEventListener()?

The addEventListener() method has three major advantages over traditional methods:

• Multiple Handlers: You can add many event listeners to the same element, even for the same event type.
• Clean Separation: It keeps your HTML files clean by separating the UI and logic.
• Dynamic Control: You can easily remove event listeners using the removeEventListener() method.

Passing Parameters

To pass parameters to the function, you must use an anonymous function or an arrow function that calls your function with the arguments.

element.addEventListener("click", function() {
  myFunction(p1, p2);
});

Bubbling vs. Capturing

There are two ways of event propagation in the HTML DOM:

• Bubbling: The inner element's event is handled first, then the outer (default).
• Capturing: The outer element's event is handled first, then the inner.

Key Points to Remember

• addEventListener() is the industry standard for event handling
• The event name does not use the "on" prefix (e.g., "click", not "onclick")
• It allows for modular and scalable interaction logic
• Use removeEventListener() to clean up memory and stop listeners
• Capturing vs. Bubbling determines the execution order in nested elements
• Highly compatible with Object-Oriented JavaScript patterns