JavaScript DOM Event Listener
JavaScript Basics

JavaScript DOM Event Listener

JavaScript HTML DOM Event Listener

The addEventListener() Method

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.


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:

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:


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

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

The removeEventListener() Method

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

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


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!");}
Take a look into your desired course