JavaScript Tutorial

DOM Event Listener

In JavaScript, event listeners are used to detect and respond to specific events triggered by user actions or interactions with elements on a webpage. They allow you to execute code or perform certain actions when an event occurs.

Method addEventListener()

Here is the syntax to add an event listener that executes when a user clicks a button:

document.getElementById("myButton").addEventListener("click", displayDateTime);

  • The addEventListener() method allows you to attach an event handler to a specified element.
  • This method enables adding event handlers to elements without overwriting existing ones.
  • Users can add multiple event handlers to a single element.
  • Users can also add multiple event handlers of the same type, such as two "click" events, to a single element.
  • Event listeners can be added to any DOM object, not just HTML elements. For example, the window object.
  • By using the addEventListener() method, controlling the event's reaction to bubbling becomes simpler.
  • Events can easily be removed using the removeEventListener() method.

Syntax :-

element.addEventListener(event, function, useCapture);

The first parameter (“event”) is the type of the event (like "click" or "mousedown or keydown" or many others.)

The second parameter is the user-defined function that we want to call when the event happens.

The third parameter is optional. It is a boolean value specifying whether to use event bubbling or event capturing.

Note: Users do not use the "on" prefix for the event; they use "click" instead of "onclick".

How to add an Event Handler to an Element

Example:-

Alert "My World!" when the user clicks on an element:

element.addEventListener("click", function(){ alert("My World!"); });

You can also do the same by an external "named" function:

Input:-

Output (Before Click):-

Output (After Click):-

Add Multiple Event Handlers to an Element

The addEventListener() method allows users to add multiple events to the same element without overwriting existing or previous events. Here's an example:

element.addEventListener("click", myFirstFunction);

element.addEventListener("click", mySecondFunction);

You can add different types of events to the same element:

Example:-

element.addEventListener("mouseover", myFirstFunction);

element.addEventListener("click", mySecondFunction);

element.addEventListener("keydown", myThirdFunction);

Add an Event Handler to the window Object

The addEventListener() method allows to add event listeners to any HTML DOM object such as HTML elements, the HTML document, the window object, or other objects that support or allows events, like the XMLHttpRequest object.

Input:-

Output (Before Resize):-

Output (After Resize the window):-

Passing Parameters

When the user passes the parameter values, the "anonymous function" that calls the specified function will have the parameters:

Example:-

element.addEventListener("click", function(){ myFunc(param1, param2); });

Event Bubbling or Event Capturing

In the HTML DOM, there are two ways of event propagation: bubbling and capturing.

Event propagation determines the order in which elements receive an event when it occurs. For example, if you have a <span> element inside a <div> element and the user clicks on the <span> element, which element's "click" event should be handled first?

In the case of bubbling, the innermost element's event is handled first, followed by the outer elements. Therefore, the <span> element's click event is handled first, and then the <div> element's click event.

In capturing, the outermost element's event is handled first, followed by the inner elements. So, the <div> element's click event will be handled first, and then the <span> element's click event.

Users can specify the propagation type by using the "useCapture" parameter in the addEventListener() method.

Example:-

addEventListener(event, function, useCapture);

The default value is false, which will use the bubbling propagation, when the value is set to true, the event uses the capturing propagation.

Example:-

document.getElementById("mySpan").addEventListener("click", myFunc, true);

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

Method removeEventListener() 

The removeEventListener() method allows to remove event handlers that is related to the addEventListener() method:

Input:-

Output (with event handler on mouse move random value will change every time):-

Output (After remove event the value will not change on mouse move):-


Go back to Previous Course