If you’re listening for a ‘click’ on multiple nested elements, the default of addEventListener is to ripple all the way up. This is called bubbling.

When you click on an element, the browswer captures each element from the outermost to the innermost (the one you clicked) and then bubbles up from the innermost to the outermost.

If you want to focus on the capture and not the bubbling, pass a third and optional options parameter.

elements.forEach(element => {
  element.addEventListener('click', yourFunction, { capture: true }
}));

Alternatively, you can also call stopPropagation() on the MouseEvent frequently called e (this is done inside the callback function being passed as second parameter of the event listener). This would only fire that specific element you clicked if the capture option is set to false, which is its default. If you use stopPropagation in conjunction with capture: true, it would fire the outermost element of the nested elements regardless of which one you clicked.

Lastly, there is another option we can add to the last parameter called once. If set to true, once clicked, the elements will unbind themselves, meaning that clicking on them would only work once.

elements.forEach(element => {
  element.addEventListener('click', yourFunction, { capture: false, once: true }
}));

If you want hands-on practice with this, I suggest you open your console and start typing away or check out day 25 of JavaScript 30.