Help with Event Listeners ?

Say I have two buttons with ‘click’ events, as the event goes it’s way in the capturing phase and passes through both buttons, will it trigger both of them instead of just the clicked button ?

If one button includes the other button, then that could happen. Capturing/bubbling is limited to the parent hierarchy of the target element. This is done because by clicking on a child object, you’re also clicking on the parent object. The parent object needs to be able to recognize those events as well as the child. Its like if I poke you in the arm. Did I poke you? Sure I did, even though, more specifically, I poked your arm. But your arm is a part of what makes you you. Same with elements in HTML. A container is defined by all its children. So if you click on a child, you’re also clicking on the container. How that event is distributed among the parents of the child clicked is what capturing/bubbling is all about.

Now if you have two sibling buttons, where neither is a parent of the other, only one of those is getting an event from a single click. There is no capturing or bubbling between them.

1 Like