Clicking in the grey box resizes the blue <div>
within it. We consider this an "interesting moment" in our script, so we create a Custom Event called onSizeChange
that fires whenever the blue box is resized. This Custom Event, when fired, publishes the blue box's new size. Note: onSizeChange
isn't a DOM event — it's an arbitrary "custom" event that has meaning in the context of our script, and an event that we think other scripts on the page might be interested in knowing about.
One subscriber to our onSizeChange
Custom Event looks at the new width and resizes the brown box to match. A second subscriber looks at the blue <div>
's new height and resizes the red box to match.