5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith<style type="text/css">
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith margin: 1em;
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith border: 1px dotted #999;
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith background-color: #FFF;
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith padding: 5px;
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith #log li highlight {
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith color: #930;
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith<div class="intro">
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith The Custom Event framework is one of the principle communication
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith mechanisms in YUI. An object can be augmented with
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith <code>EventTarget</code>, enabling it to be both a host and a target
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith for custom events. Custom events fire from their host and optionally
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith bubble up to one or more targets. This allows you to make the
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith interesting moments of your applications broadly available within a
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith module, within a set of modules, or throughout a complex interface
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith populated with rich elements.
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith In this example, a simple custom event is illustrated:
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith <code>testEvent</code>. This custom event is hosted on a Publisher
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith object and bubbles up to a BubbleTarget object.
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith <img src="{{componentAssets}}/ce-example.gif"
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith alt="An illustration of the relationship between the custom event, its host, and its Bubble Target.">
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith Like DOM events, custom event bubbling can be stopped with
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith `e.stopPropagation()` and default behavior can be suppressed with
819e90d415ed17d59af3a247b2ad9d6feb0c21b5Luke Smith<div class="example yui3-skin-sam">
6df0c25001d3c28414969e057dfa8c1f3352a129Luke Smith <button id="fire" value="Fire">Fire testEvent</button>
6df0c25001d3c28414969e057dfa8c1f3352a129Luke Smith <input type="checkbox" id="stopPropagation">
6df0c25001d3c28414969e057dfa8c1f3352a129Luke Smith <label for="stopPropagation">
6df0c25001d3c28414969e057dfa8c1f3352a129Luke Smith Stop Propagation (testEvent won't bubble to the BubbleTarget.)
6df0c25001d3c28414969e057dfa8c1f3352a129Luke Smith <input type="checkbox" id="preventDefault">
6df0c25001d3c28414969e057dfa8c1f3352a129Luke Smith <label for="preventDefault">
6df0c25001d3c28414969e057dfa8c1f3352a129Luke Smith Prevent Default (testEvent's `defaultFn` won't fire.)
6df0c25001d3c28414969e057dfa8c1f3352a129Luke Smith <ol id="log">
6df0c25001d3c28414969e057dfa8c1f3352a129Luke Smith <li>Custom Event log messages will appear here.</li>
6df0c25001d3c28414969e057dfa8c1f3352a129Luke Smith {{>flow-example-js}}
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith<h2>Source Code</h2>
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith The full source code for this example follows. Read through the comments
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith and code to get an understanding of how you can make use of custom events
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith in your own application development.
5abe4e6ccb00e9414eb123e8d3d7e1a8d2a7c317Luke Smith{{>flow-example-js}}