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