Using Custom Events

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.

Click anywhere within the grey box to resize me.
Width will resize to match blue box.
Height will resize to match blue box.