The Custom Event framework is one of the principle communication mechanisms in YUI. An object can be augmented with EventTarget, enabling it to be both a host and a target for custom events. Custom events fire from their host and optionally bubble up to one or more targets. This allows you to make the interesting moments of your applications broadly available within a module, within a set of modules, or throughout a complex interface populated with rich elements.

In this example, a simple custom event is illustrated: testEvent. This custom event is hosted on a Publisher object and bubbles up to a BubbleTarget object.

An illustration of the relationship between the custom event, its host, and its Bubble Target.

Like DOM events, custom event bubbling can be stopped with `e.stopPropagation()` and default behavior can be suppressed with `e.preventDefault()`.

  1. Custom Event log messages will appear here.

Source Code

The full source code for this example follows. Read through the comments and code to get an understanding of how you can make use of custom events in your own application development.

``` {{>flow-example-js}} ```