What I learned on this mini-project.
When an event listener has been attached to a DOM element whose parent has the same listener. triggering the event will lead to both elements firing.
By default the events will be triggered from the inside out, but
setting capture
to true
in third options parameter, will reverse this direction.
https://gist.github.com/f9e50b9584e3c4b3b99621b24d4e2967
This is a useful option for the addEventListener
method, that will
prevent the element from triggering multiple events. It has the same
functionality as removeEventListener
for those higher in the chain.
https://gist.github.com/a101b2f5752487bdc0ce3c8a5e0159ef
This is the blanket term that refers to bubbling
and capturing
. It
essentially means that events will cascade up and down the DOM,
from the target element all the way up to the window object.
The direction of propagation can be both ways.
A nice summary of the concept is explained by dividing it into three phases.
This was taken from the following article.
capture phase
- From the window to the event targettarget phase
- The event targetbubble phase
- From the event target back to the window