When using addEventListener in React, why does the onclick event listener of an outer element get triggered prior to the onclick event listener of an inner element?

edit

This is because of the concept of event bubbling in the DOM (Document Object Model). When an event is triggered on an element, the event first goes through the innermost element and then propagates outwards to the outer elements, triggering their event listeners as well. This is known as event bubbling.

So, when we have an inner element and an outer element with their respective event listeners, the event on the inner element will be triggered first and then the event on the outer element will be triggered. This behavior can be changed using stopPropagation() method to prevent this bubbling behavior.