When an event occurs in JavaScript, it doesn't simply happen and vanish—it goes through a life cycle. There are three phases to this life cycle:
- The capture phase
- The targeting phase
- The bubbling phase
Consider the following HTML:
<!doctype html>
<html>
<head>
<title>My great page</title>
</head>
<body>
<button>Click here</button>
</body>
</html>
We can visualize it as follows:
Figure 7.1 – The event life cycle
Now, there's something else that is important to consider when it comes to events: they don't just take effect on the exact target, but rather on the whole stack of objects. Before we describe what capturing, targeting, and bubbling entail, take a look at the following representation of our code:
Figure 7.2 – Event layering
If we think about our page as a layer cake, we can see that this event (represented by the arrow) must pass through all the layers of our...