Bubbling and capturing example

Here's some code that I proposed as an update to MDN's Introduction to events tutorial.

UPDATE: My suggestions were accepted and merged with the MDN tutorial on the 25th of November 2021. See my pull request for more details.

The iframe below contains the original version of the code example from the tutorial (accessed on the 24th of November 2021). The example contains five nested <div> elements, which run some JavaScript code that reports bubbling and capturing events when one of the elements is clicked. The button runs a function that clears the text output, but the bubbling stage events for the window and the HTML document remain displayed in the log section after this button is clicked.

Here's the original JavaScript code:

I created an updated version with evt.stopPropagation() added to the clearOutput() function. This means that no messages are left in the log section after the "clear output" button is clicked. This version is displayed in the iframe below:

I also added some string formatting code to the gphase() function to remove the square brackets and "object" from the log text.

Here's my updated version of the JavaScript code:

See the readme file in this repo for more information.