Event bubbling and event capturing?

Question

>> The third parameter is a Boolean value specifying whether to use event bubbling or event capturing
What is event bubbling and what is event capturing?

Answer 1

I changed a code that just demonstrated canceling the "default" action to include a "bubbling vs capturing" output, because it already had the click chain intercepted.

There are simpler *code* examples, but as a *visual* hopefully it's clear to see that the direction changes when you click the document, then the button (and repeat):
https://code.sololearn.com/W32dMUHAsPnL/?ref=app

Events propagating from an outer->inner element are said to be going "down", while inner->outer is "up"
Captured events trickle "down", bubbling events bubble "up"

Answer 2

A simpler example (if anyone wants to try one) could use just one click function, attach that one function as a listener to every element, then output event.currentTarget.

Answer 3

Thanks ODLNT and Kirk Schafer,
I followed your advice and altered your code to be an example showing the element type.

https://code.sololearn.com/WG2SDmvdOuPE/?ref=app

I am very clear of this concept now~ Thanks Kirk.

And bonus is that, I also learned that window.onclick and document.onclick and html.onclick are possible~ And also how to prevent hyperlink from working. Thanks again~