0N/A<style type="text/css">

2362N/A #fire {

0N/A margin: 1em;

0N/A }

0N/A #log {

0N/A border: 1px dotted #999;

0N/A background-color: #FFF;

0N/A }

0N/A #log li {

0N/A padding: 5px;

0N/A }

0N/A #log li highlight {

0N/A color: #930;

0N/A }

0N/A</style>

0N/A

0N/A<div class="intro">

0N/A <p>

2362N/A The Custom Event framework is one of the principle communication

2362N/A mechanisms in YUI. An object can be augmented with

2362N/A <code>EventTarget</code>, enabling it to be both a host and a target

0N/A for custom events. Custom events fire from their host and optionally

0N/A bubble up to one or more targets. This allows you to make the

0N/A interesting moments of your applications broadly available within a

0N/A module, within a set of modules, or throughout a complex interface

0N/A populated with rich elements.

0N/A </p>

0N/A

0N/A <p>

0N/A In this example, a simple custom event is illustrated:

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

0N/A object and bubbles up to a BubbleTarget object.

0N/A </p>

0N/A

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

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

0N/A

0N/A <p>

0N/A Like DOM events, custom event bubbling can be stopped with

0N/A `e.stopPropagation()` and default behavior can be suppressed with

0N/A `e.preventDefault()`.

0N/A </p>

0N/A</div>

0N/A

0N/A<div class="example yui3-skin-sam">

0N/A {{>flow-example-source}}

0N/A</div>

0N/A

0N/A<h2>Source Code</h2>

0N/A

0N/A<p>

0N/A The full source code for this example follows. Read through the comments

0N/A and code to get an understanding of how you can make use of custom events

0N/A in your own application development.

0N/A</p>

0N/A

0N/A```

0N/A{{>flow-example-js}}

0N/A```

0N/A

0N/A