customevent.html revision 482388c306e346930994afd7e59b3af43c00aac6
a3f3701cea1ba388e7c877955252bb7375eedebdvboxsync<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
a3f3701cea1ba388e7c877955252bb7375eedebdvboxsync<script type="text/javascript" src="/build/yui/yui.js"></script>
a3f3701cea1ba388e7c877955252bb7375eedebdvboxsync<p><input type="button" value="Run Tests" id="btnRun" disabled="true" /></p>
a3f3701cea1ba388e7c877955252bb7375eedebdvboxsync <a title="remove module" class="yui-remove"><em>x</em></a>
a3f3701cea1ba388e7c877955252bb7375eedebdvboxsync <p>This an example of what you can do with the YUI Animation Utility.</p>
a3f3701cea1ba388e7c877955252bb7375eedebdvboxsync <p><em>Follow the instructions above to see the animation in action.</em></p>
a3f3701cea1ba388e7c877955252bb7375eedebdvboxsync(function() {
a3f3701cea1ba388e7c877955252bb7375eedebdvboxsync var global_notified;
a3f3701cea1ba388e7c877955252bb7375eedebdvboxsync //YUI.add("selector-native", function(){});
a3f3701cea1ba388e7c877955252bb7375eedebdvboxsync filter: "debug",
a3f3701cea1ba388e7c877955252bb7375eedebdvboxsync onCSS: function(Y) {
a3f3701cea1ba388e7c877955252bb7375eedebdvboxsync Y.log('CSS is done loading', 'info', 'testcase');
a3f3701cea1ba388e7c877955252bb7375eedebdvboxsync logExclude: { get: true, Dom: true, Selector: true, Node: true, attribute: true, event: true, base: true, widget: true },
a3f3701cea1ba388e7c877955252bb7375eedebdvboxsync base: 'raw',
a3f3701cea1ba388e7c877955252bb7375eedebdvboxsync // dom: null,
a3f3701cea1ba388e7c877955252bb7375eedebdvboxsync attribute: 'min'
a3f3701cea1ba388e7c877955252bb7375eedebdvboxsync }).use("dump", "test", "anim", "console", function(Y) {
a3f3701cea1ba388e7c877955252bb7375eedebdvboxsync // Y.Global.on('yui:log', function(e) {
var button = Y.one('#btnRun');
button.set("disabled", false);
Y.on("click", function() {
var myConsole = new Y.Console().render();
Y.log('{}');
var testEventTarget = new Y.Test.Case({
this.id = id;
Y.log('O constructor executed ' + id);
O.prototype = {
Y.log('oOo');
handle = o.on('testAugment', function(e, arg1, arg2) {
Y.Assert.isTrue(this instanceof O);
Y.Assert.isTrue(arg1 === 1);
Y.Assert.isTrue(arg2 === 2);
o.fire('testAugment', { foo: 'afoo' }, 1, 2);
Y.Assert.isTrue(fired);
o.on('testAugment', function(e, arg1, arg2) {
Y.Assert.areEqual(1, arg1);
Y.Assert.areEqual(2, arg2);
o.fire('testAugment', 1, 2);
var anim = new Y.Anim({
Y.detach('foo', tester);
Y.on('foo', tester);
Y.fire('foo');
Y.fire('foo');
Y.Assert.areEqual(1, count);
// this.detach('anim:end', onEnd);
this.detach('end', onEnd);
easing: Y.Easing.bounceOut
this.run();
anim.on('end', onEnd);
anim.run();
anim.run();
Y.log('Base constructor executed');
arguments.callee.superclass.constructor.apply(this, arguments);
Y.log('all your base...');
b.on('testExtend', function(arg1, arg2) {
Y.Assert.isTrue(this instanceof Base);
Y.Assert.isTrue(arg1 === 1);
Y.Assert.isTrue(arg2 === 2);
b.fire('testExtend', 1, 2);
Y.Assert.isTrue(fired);
this.id = id;
Y.log('O constructor executed ' + id);
O.prototype = {
Y.log('oOo');
o.on('testPrefix', function(e, arg1, arg2) {
Y.Assert.isTrue(this instanceof O);
o.on('prefix:testPrefix', function(e, arg1, arg2) {
Y.Assert.isTrue(this instanceof O);
o.fire('testPrefix', { foo: 'afoo' }, 1, 2);
Y.Assert.isTrue(fired1);
// Y.Assert.isTrue(fired2);
o.fire('prefix:testPrefix', { foo: 'afoo' }, 1, 2);
Y.Assert.isTrue(fired1);
Y.Assert.isTrue(fired2);
Y.on('handle|test:event', function() {
Y.fire('test:event');
Y.Assert.isTrue(fired1);
Y.Assert.isFalse(fired2);
Y.detach('handle|test:event');
Y.on('handle|test:event', function() {
Y.fire('test:event');
Y.Assert.isFalse(fired1);
Y.Assert.isTrue(fired2);
Y.detach('handle|test:event');
Y.after('handle|test:event', function(arg1) {
Y.Assert.areEqual('orange', arg1);
Y.Assert.isTrue(fired1);
Y.on('handle|test:event', function(arg1) {
Y.Assert.areEqual('orange', arg1);
Y.Assert.isFalse(fired2);
Y.fire('test:event', 'orange');
var ret = Y.detach('handle|test:event');
Y.Assert.areEqual(Y, ret);
Y.fire('test:event', 'orange');
Y.Assert.isFalse(fired1);
Y.Assert.isFalse(fired2);
Y.after('handle|event2', function() {
Y.on('handle|event2', function() {
Y.detach('handle|*');
Y.fire('event2');
Y.Assert.isFalse(fired1, 'fired1, the after listener should not have fired.');
Y.Assert.isFalse(fired2, 'fired2, the on listener should not have fired.');
Y.Assert.isTrue(fired2);
Y.Assert.isFalse(fired1);
base:'/build/',
var o = new Y2.EventTarget({
// Y2.after('p:e', f1).on('p:e', f2).on('p:e2', f3).on('detach, p:e', f4).detach('detach, p:e').fire('p:e').fire('p:e2');
o.after('e', f1).on('foo:e', f2).on('foo:e2', f3).on('detach, e', f4).detach('detach,e').fire('foo:e').fire('e2').on('pre:e', f5).fire('pre:e');
Y.Assert.isTrue(fired2); // verifies chaining, on/after order, and accepting the prefix in the event name
Y.Assert.isTrue(fired3); // verifies no interaction between events, and prefix manipulation
Y.Assert.isFalse(fired4); // verifies detach works (regardless of spaces after comma)
Y.Assert.isTrue(fired5); // verifies custom prefix
Y.on({
Y.fire('y:click');
Y.fire('y:clack');
Y.Assert.isTrue(f1);
Y.Assert.isTrue(f2);
a = new Y.EventTarget(config),
b = new Y.EventTarget(config);
b.addTarget(a);
// b.publish('test:foo');
a.on('test:foo', function(e) {
ret = b.fire('test:foo', {}, b);
Y.Assert.areEqual(1, count);
Y.Assert.isTrue(ret);
b.on('test:foo', function(e) {
ret = b.fire('test:foo', {}, b);
Y.Assert.areEqual(1, count);
Y.Assert.isFalse(ret);
Y.publish('y:foo1', {
Y.Assert.isTrue(this instanceof YUI);
Y.on('y:foo1', function(e) {
Y.on('y:foo1', function(e) {
Y.fire('y:foo1');
Y.Assert.areEqual(1, count);
Y.publish('y:foo', {
Y.on('y:foo', function(e) {
handle = Y.on('y:foo', function(e) {
handle2 = Y.on('y:foo', function(e) {
Y.detach(handle);
Y.fire('y:foo');
Y.Assert.areEqual(1, count);
var handle3 = Y.on('y:click', function() {
Y.fire('y:click');
Y.fire('y:click');
var o = new Y.EventTarget();
o.on('foo', function(e) {
o.on('foo', function(e) {
o.detachAll();
o.fire('foo');
Y.Assert.areEqual(0, count);
var handle3 = Y.on('y:click', function() {
Y.detachAll();
Y.fire('y:click');
Y.Assert.areEqual(1, count);
var o = new Y.EventTarget(), s1, s2, s3, s4;
o.publish('y:foo2', {
Y.on('y:foo2', function() {
Y.log('Y foo2 executed');
Y.Global.on('y:foo2', function() {
Y.log('GLOBAL foo2 executed');
o.fire('y:foo2');
Y.Assert.areEqual(1, s1);
Y.Assert.areNotEqual(1, s2);
o.publish('y:bar', {
Y.on('y:bar', function() {
Y.log('Y bar executed');
Y.Global.on('y:bar', function() {
Y.log('GLOBAL bar executed');
o.fire('y:bar');
Y.Assert.areEqual(1, s3);
Y.Assert.areEqual(1, s4);
Y.Global.on('y:bar', function(e) {
Y.log('GLOBAL bar executed');
o.fire('y:bar');
o.fire('y:bar');
Y.publish('fireonce', {
Y.fire('fireonce', 'foo', 'bar');
Y.on('fireonce', function(arg1, arg2) {
Y.Assert.areEqual('foo', arg1, 'arg1 not correct for lazy fireOnce listener')
Y.Assert.areEqual('bar', arg2, 'arg2 not correct for lazy fireOnce listener')
Y.fire('fireonce', 'foo2', 'bar2');
Y.fire('fireonce', 'foo3', 'bar3');
Y.on('fireonce', function(arg1, arg2) {
Y.log('the notification is asynchronous, so I need to wait for this test');
Y.Assert.areEqual(1, notified, 'listener notified more than once.');
// Y.Assert.isFalse(global_notified, 'notification was not asynchronous');
Y.Assert.isTrue(global_notified, 'asynchronous notification did not seem to work.');
var node = Y.one('#adiv');
node.publish('foo1', {
node.on('foo1', function(e) {
Y.Assert.areEqual('foo1', e._type);
node.on('foo1', function(e) {
node.fire('foo1', {
Y.Assert.areEqual(1, preventCount);
Y.Assert.areEqual(2, heard);
called = this.name;
leaf = new Y.EventTarget(config),
branch = new Y.EventTarget(config),
root = new Y.EventTarget(config);
leaf.name = 'leaf';
branch.name = 'branch';
root.name = 'root';
leaf.addTarget(branch);
branch.addTarget(root);
leaf.publish('test:foo', { defaultFn: fn});
branch.publish('test:foo', { defaultFn: fn});
root.publish('test:foo', { defaultFn: fn});
leaf.on('test:foo', function(e) {
branch.on('test:foo', function() {
root.on('test:foo', function() {
root.after('test:foo', function() {
branch.after('test:foo', function() {
Y.Assert.areEqual('branch', called, 'branch.after should be executed after the branch default function');
leaf.after('test:foo', function(e) {
leaf.fire('test:foo', {}, leaf);
Y.Assert.areEqual(6, count);
called = this.name;
leaf = new Y.EventTarget(config),
branch = new Y.EventTarget(config),
root = new Y.EventTarget(config);
leaf.name = 'leaf';
branch.name = 'branch';
root.name = 'root';
leaf.addTarget(branch);
branch.addTarget(root);
leaf.publish('test:foo', { defaultFn: fn});
branch.publish('test:foo', { defaultFn: fn});
root.publish('test:foo', { defaultFn: fn});
leaf.on('test:foo', function(e) {
console.log('leaf on');
branch.on('test:foo', function() {
console.log('branch on');
root.on('test:foo', function() {
console.log('root on');
leaf.after('test:foo', function(e) {
console.log('leaf after');
// Y.Assert.areEqual('root', called, 'leaf.after should be executed after the root default function');
branch.after('test:foo', function() {
console.log('branch after');
// Y.Assert.areEqual('root', called, 'leaf.after should be executed after the root default function');
root.after('test:foo', function() {
console.log('root after');
// Y.Assert.areEqual('root', called, 'leaf.after should be executed after the root default function');
leaf.fire('test:foo', {}, leaf);
Y.Assert.areEqual(6, count, 'total subscriber count');
z = new Y.EventTarget(config),
a = new Y.EventTarget(config),
b = new Y.EventTarget(config);
b.addTarget(a);
a.addTarget(z);
z.on('*:foo', function(e) {
ret = b.fire('a:foo', {}, b);
Y.Assert.areEqual(1, count);
Y.Assert.isTrue(ret);
ret = b.fire('b:foo', {}, b);
Y.Assert.areEqual(2, count);
Y.Assert.isTrue(ret);
ret = b.fire('foo', {}, b);
Y.Assert.areEqual(3, count);
Y.Assert.isTrue(ret);
z = new Y.EventTarget(config),
a = new Y.EventTarget(config),
b = new Y.EventTarget(config);
b.addTarget(a);
a.addTarget(z);
z.after('*:foo', function(e) {
// e.preventDefault();
ret = b.fire('a:foo', {}, b);
Y.Assert.areEqual(0, count);
Y.once(['foo', 'bar'], function(e) {
Y.fire('foo', 'bar');
Y.fire('bar', 'bar');
Y.Assert.areEqual(2, count);
Y.fire('foo', 'bar');
Y.fire('bar', 'bar');
Y.Assert.areEqual(2, count);
var handle1 = Y.after(['foo', 'bar'], function(type) {
var handle2 = Y.on(['foo', 'bar'], function(type) {
Y.fire('foo', 'foo');
Y.fire('bar', 'bar');
Y.Assert.areEqual('onfooafterfooonbarafterbar', result);
Y.fire('foo', 'foo');
Y.fire('bar', 'bar');
Y.Assert.areEqual('onfooafterfooonbarafterbar', result);
var a = new Y.EventTarget(),
b = new Y.EventTarget(),
a.publish("foo", {
a.addTarget(b);
b.on("foo", function(e) {
result = (e instanceof Y.EventFacade);
a.fire("foo");
Y.Assert.isTrue(result);
Y.Test.Runner.add(testEventTarget);
// base: "/build/",