JS30 Challenge Day 25 - Event capturing and bubbling

When you click on the innermost div, we are also clicking on its parents. So the event bubbles and calls out class ‘three’ then ‘two’ then ‘one’, moving from the innermost div to the outermost.

First, the capture happens in which the browser ripples down from the html to the body to the parents to our coral div. It starts at the coral and it bubbles up, goes on triggering events the way up.

capture:true|false is passed as an object in the third parameter of addEventListener

once: true|false is passed as the fourth parameter to addEventListener and this runs the bubbling or capturing exactly once and then unbinds itself which is similar to a removeEventListener();

e.stopPropagation(); stops the bubbling at the current step.