DOM event flow
Let's go over what happens when you click on an element that has multiple elements associated with it.
We are going to create nested div elements. In order to illustrate this, there is a style added to the body. It is actually better to add this style in a head tag, and even better to have a separate CSS file, but this is a bit shorter to read. This is what the nested div elements will look like:
Figure 11.3: Event bubbling in web page
And below is the code associated with it. The script is on the bottom and will be executed when the parts on top are done. It is going to add event listeners to every div, and what it will do is log the innerText. For the outermost element of the nested div elements, this would be 12345, with a new number on every line.
So the question here is, how will it trigger the events? Say we click on the 5, what will be executed? The event of all of the nested div elements, or only the one from 5? And if it is going to...
