Skip to main content

Events listener in JavaScript

An event listener is a function that waits for a specific event to occur and then triggers an action in response to that event.

To add an event listener to a DOM element, you can use the addEventListener() method. This method takes two arguments: the type of event to listen for, and the function that will be called when the event occurs.

As an example:

Editor

Loading...

In this example:

  • We have an HTML file with a button element that has an id of "myButton".
  • The JavaScript code is embedded within a <script> tag, which is placed inside the <body> tag after the button element.
  • The document.querySelector("#myButton") selects the button element with the id "myButton".
  • The addEventListener() method adds a click event listener to the button that logs "Button clicked!" to the console when the button is clicked.
tip

Many different types of events that can be listened for, such as 'mousemove', 'keydown', and 'submit'. You can also use event listeners to trigger actions on multiple elements, or to remove event listeners using the removeEventListener() method.

The removeEventListener() method​

The removeEventListener() method is used to remove an event listener that was previously added to an element with the addEventListener() method.

This method takes three arguments: the type of event to remove, the function that was used as the event listener, and an optional boolean value that specifies whether to use capturing (true) or bubbling (false) when removing the listener.

As an example:

Editor

Loading...

In this example:

  • The const myButton = document.querySelector('#myButton'); line of code obtains a reference to the button element using the querySelector() method and stores it in the myButton constant.
  • The handleClick() function is defined, which logs "Button clicked!" to the console when called.
  • The myButton.addEventListener('click', handleClick); line of code adds a click event listener to the button that calls the handleClick() function when the button is clicked.
  • The myButton.removeEventListener('click', handleClick); line of code removes the click event listener from the button, so that the handleClick() function will not be called when the button is clicked after that point.

Event Bubbling or Event Capturing?​

Event propagation refers to the way events are handled when they occur on nested DOM elements.

There are two different methods of event propagation:

Event Bubbling​

Event bubbling is the default behavior in which an event first triggers on the innermost element where it originated, and then successively triggers on its parent elements in the DOM tree, propagating up to the top or the outermost element.

This means that when an event occurs on a nested element, it is also triggered on its parent elements, all the way up to the root of the DOM tree.

Event Capturing​

Event capturing is the opposite of event bubbling. In event capturing, the event is first triggered on the outermost or the root element, and then successively triggers on its nested or child elements, propagating down to the innermost element where the event originated. However, it's worth mentioning that event capturing is less commonly used in practice.

Example:

const myElement = document.querySelector("#myElement");

myElement.addEventListener("click", () => {
  console.log("Event Bubbling: Clicked on inner element");
});

myElement.addEventListener(
  "click",
  () => {
    console.log("Event Capturing: Clicked on outer element");
  },
  true
);

In this example:

  • Two event listeners are added to the same element for the click event.
  • The first event listener uses event bubbling (the default behavior) and triggers when the inner element is clicked.
  • The second event listener uses event capturing with the true argument, and triggers when the outer element is clicked before the inner element, capturing the event during the capture phase.