The addEventListener() method attaches an event handler to a specified element without overwriting existing event handlers. It allows you to add multiple event handlers to a single element, even if they are of the same type.

Example: Adding a Click Event Listener

Add an event listener that fires when a user clicks a button:

document.getElementById("myBtn").addEventListener("click", displayDate);

‍

Benefits of addEventListener()

Attaches event handlers to elements without overwriting existing handlers.
Allows multiple event handlers of the same type.
Can add event listeners to any DOM object, not just HTML elements.
Makes event handling easier to control, especially with event bubbling.
Keeps JavaScript separate from HTML markup, improving readability.
Allows adding event listeners even if you don't control the HTML markup.

Syntax

element.addEventListener(event, function, useCapture);

‍

event: The type of event (e.g., "click", "mousedown").
function: The function to call when the event occurs.
useCapture (optional): A boolean value specifying event propagation type (default is false for bubbling).

Adding an Event Handler to an Element

Example: Alert "Hello World!" When Clicked

element.addEventListener("click", function()

{  alert("Hello World!");});‍
You can also refer to an external named function:element.addEventListener("click", myFunction);‍
function myFunction() 

{  alert("Hello World!");}

‍

Adding Multiple Event Handlers to the Same Element

The addEventListener() method allows adding multiple events to the same element without overwriting existing events:

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

‍

You can also add different event types to the same element:

element.addEventListener("mouseover", myFunction);

element.addEventListener("click", mySecondFunction);

element.addEventListener("mouseout", myThirdFunction);

‍

Adding an Event Handler to the Window Object

The addEventListener() method can be used to add event listeners to any HTML DOM object, including the window object:

Example: Resizing the Window

window.addEventListener("resize", function() 
{  document.getElementById("demo").innerHTML = "Window resized!";}

);‍

Passing Parameters

When passing parameters, use an anonymous function to call the specified function with the parameters:

Example:

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

});‍

Event Bubbling or Event Capturing?

Event propagation defines the order in which elements receive events. There are two types:

Bubbling: The innermost element's event is handled first, then the outer elements.
Capturing: The outermost element's event is handled first, then the inner elements.

Specify the propagation type using the useCapture parameter:

element.addEventListener

("click", myFunction, true); // Capturingelement.addEventListener("click", myFunction, false);
// Bubbling (default)

Example:

‍

document.getElementById("myP").addEventListener
("click", myFunction, true);document.getElementById("myDiv").addEventListener(
"click", myFunction, true);‍

The removeEventListener() Method

The removeEventListener() method removes event handlers that were attached with addEventListener():

Example:

element.removeEventListener("mousemove", myFunction);

‍

HTML DOM Event Object Reference

For a complete list of HTML DOM events, refer to the HTML DOM Event Object Reference.

Test Yourself With Exercises

Exercise:

Use addEventListener to assign an onclick event to the <button> element.

<button id="demo">

Click Me</button>‍
<script>document.getElementById("demo").addEventListener("click", myFunction);‍

function myFunction() {  alert("Button clicked!");}</script>‍<button id="demo">
Click Me</button>‍<script>document.getElementById("demo").addEventListener("click", myFunction);‍function myFunction()
{  alert("Button clicked!");}
</script>‍

Take a look into your desired course