<style type="text/css">

#fire {

margin: 1em;

}

#log {

border: 1px dotted #999;

background-color: #FFF;

}

#log li {

padding: 5px;

}

#log li highlight {

color: #930;

}

</style>

<div class="intro">

<p>

The Custom Event framework is one of the principle communication

mechanisms in YUI. An object can be augmented with

<code>EventTarget</code>, 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.

</p>

<p>

In this example, a simple custom event is illustrated:

<code>testEvent</code>. This custom event is hosted on a Publisher

object and bubbles up to a BubbleTarget object.

</p>

<img src="{{componentAssets}}/ce-example.gif"

alt="An illustration of the relationship between the custom event, its host, and its Bubble Target.">

<p>

Like DOM events, custom event bubbling can be stopped with

`e.stopPropagation()` and default behavior can be suppressed with

`e.preventDefault()`.

</p>

</div>

<div class="example yui3-skin-sam">

<p>

<button id="fire" value="Fire">Fire testEvent</button>

</p>

<div>

<input type="checkbox" id="stopPropagation">

<label for="stopPropagation">

Stop Propagation (testEvent won't bubble to the BubbleTarget.)

</label>

</div>

<div>

<input type="checkbox" id="preventDefault">

<label for="preventDefault">

Prevent Default (testEvent's `defaultFn` won't fire.)

</label>

</div>

<ol id="log">

<li>Custom Event log messages will appear here.</li>

</ol>

<script>

{{>flow-example-js}}

</script>

</div>

<h2>Source Code</h2>

<p>

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.

</p>

```

{{>flow-example-js}}

```