customevent.html revision fb49666327c2cb6ea5a7d2dea5160b649bc07c51
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
52671ce4f644d565b2acd71a8ce4f6d20829a67cAdam Moore<script type="text/javascript" src="/build/yui/yui-debug.js"></script>
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore<p><input type="button" value="Run Tests" id="btnRun" disabled="true" /></p>
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore(function() {
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore //YUI.add("selector-native", function(){});
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore filter: "debug",
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore // combine: false,
c4f19796d319a7ec9a1e76d48adc82c9c5ae2f27Adam Moore useConsole: true,
08e054017132cdd838955bc0af15889f1f2a7b42Adam Moore onCSS: function(Y) {
b46f3d670b654847b0ce60afdba1b461c492a5c9Adam Moore Y.log('CSS is done loading');
b46f3d670b654847b0ce60afdba1b461c492a5c9Adam Moore // logInclude: ['event', 'test']
08e054017132cdd838955bc0af15889f1f2a7b42Adam Moore logExclude: {
0771d781138a507b3e657573703f511291640bf3Adam Moore Selector: true,
52671ce4f644d565b2acd71a8ce4f6d20829a67cAdam Moore attribute: true,
0771d781138a507b3e657573703f511291640bf3Adam Moore loader: true,
0dca577a07715960da42d47787eecc25b285182fAdam Moore widget: true
0771d781138a507b3e657573703f511291640bf3Adam Moore base: 'raw',
0771d781138a507b3e657573703f511291640bf3Adam Moore // dom: null,
9c42541e375e7bb70c53012b3012d70f1a380254Adam Moore attribute: 'min'
9c42541e375e7bb70c53012b3012d70f1a380254Adam Moore }).use("dump", "test", "console", function(Y) {
9c42541e375e7bb70c53012b3012d70f1a380254Adam Moore // Y.Global.on('yui:log', function(e) {
8aa0880cd494c951e0f4aa7d82d8bdac7692c7d0Adam Moore var button = Y.get('#btnRun');
8aa0880cd494c951e0f4aa7d82d8bdac7692c7d0Adam Moore // Set up the page
abdfe7cf11d34f89f17b26e4779bf6079d22a910Adam Moore button.set("disabled", false);
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore Y.on("click", function() {
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore var myConsole = new Y.Console().render();
2690c090ce850e485d15cf691f59e8aaeb3b4bb1Adam Moore var testEventTarget = new Y.Test.Case({
fb49666327c2cb6ea5a7d2dea5160b649bc07c51Adam Moore name: "EventTarget tests",
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore testAugment: function() {
21f450f4fd5fd60f951de44878aae015ed0342e3Adam Moore var fired = false;
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore var O = function(id) {
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore Y.log('O constructor executed ' + id);
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore oOo: function(ok) {
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore // pass configuration info into EventTarget with the following
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore // construct
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore emitFacade: true
abdfe7cf11d34f89f17b26e4779bf6079d22a910Adam Moore var o = new O(),
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore handle = o.on('testAugment', function(e, arg1, arg2) {
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore Y.Assert.isTrue(this instanceof O);
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore fired = true;
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore o.fire('testAugment', { foo: 'afoo' }, 1, 2);
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore // if the first argument is not an object, the
eab87f0881fdf3e80c2a1af9224c50f0bf033644Adam Moore // event facade is moved in front of the args rather
eab87f0881fdf3e80c2a1af9224c50f0bf033644Adam Moore // than overwriting existing object.
eab87f0881fdf3e80c2a1af9224c50f0bf033644Adam Moore o.on('testAugment', function(e, arg1, arg2) {
eab87f0881fdf3e80c2a1af9224c50f0bf033644Adam Moore o.fire('testAugment', 1, 2);
eab87f0881fdf3e80c2a1af9224c50f0bf033644Adam Moore testExtend: function() {
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore var fired = false;
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore var Base = function() {
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore Y.log('Base constructor executed');
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore arguments.callee.superclass.constructor.apply(this, arguments);
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore base: function() {
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore Y.log('all your base...');
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore var b = new Base();
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore b.on('testExtend', function(arg1, arg2) {
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore Y.Assert.isTrue(this instanceof Base);
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore fired = true;
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore b.fire('testExtend', 1, 2);
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore testPrefix: function() {
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore var fired1 = false,
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore fired2 = false;
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore var O = function(id) {
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore Y.log('O constructor executed ' + id);
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore oOo: function(ok) {
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore // pass configuration info into EventTarget with the following
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore // construct
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore emitFacade: true,
abdfe7cf11d34f89f17b26e4779bf6079d22a910Adam Moore prefix: 'prefix'
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore var o = new O();
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore o.on('testPrefix', function(e, arg1, arg2) {
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore Y.Assert.isTrue(this instanceof O);
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore fired1 = true;
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore o.on('prefix:testPrefix', function(e, arg1, arg2) {
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore Y.Assert.isTrue(this instanceof O);
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore fired2 = true;
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore o.fire('testPrefix', { foo: 'afoo' }, 1, 2);
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore fired1 = false;
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore fired2 = false;
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore o.fire('prefix:testPrefix', { foo: 'afoo' }, 1, 2);
80d2034f65b9348e5fd36291f03b0819181efb89Adam Moore testDetachKey: function() {
9bc9c1474a84983bd254adc2bc425c5b24d25526Adam Moore var fired1 = false,
9bc9c1474a84983bd254adc2bc425c5b24d25526Adam Moore fired2 = false;
9bc9c1474a84983bd254adc2bc425c5b24d25526Adam Moore Y.on('handle|test:event', function() {
9bc9c1474a84983bd254adc2bc425c5b24d25526Adam Moore fired1 = true;
9c69eb57afb13ae0ffed8e442449f04922fe30adAdam Moore // one listener
9bc9c1474a84983bd254adc2bc425c5b24d25526Adam Moore Y.fire('test:event');
bd6676c46a56d23b5e6f4702054bbd52e3d6f05fAdam Moore Y.detach('handle|test:event');
9bc9c1474a84983bd254adc2bc425c5b24d25526Adam Moore fired1 = false;
9bc9c1474a84983bd254adc2bc425c5b24d25526Adam Moore fired2 = false;
9bc9c1474a84983bd254adc2bc425c5b24d25526Adam Moore Y.on('handle|test:event', function() {
9bc9c1474a84983bd254adc2bc425c5b24d25526Adam Moore fired2 = true;
9c69eb57afb13ae0ffed8e442449f04922fe30adAdam Moore // first lisener detached, added a new listener
9bc9c1474a84983bd254adc2bc425c5b24d25526Adam Moore Y.fire('test:event');
bd6676c46a56d23b5e6f4702054bbd52e3d6f05fAdam Moore Y.detach('handle|test:event');
9bc9c1474a84983bd254adc2bc425c5b24d25526Adam Moore fired1 = false;
9bc9c1474a84983bd254adc2bc425c5b24d25526Adam Moore fired2 = false;
9c69eb57afb13ae0ffed8e442449f04922fe30adAdam Moore Y.after('handle|test:event', function(arg1) {
9bc9c1474a84983bd254adc2bc425c5b24d25526Adam Moore Y.Assert.areEqual('orange', arg1);
9bc9c1474a84983bd254adc2bc425c5b24d25526Adam Moore fired2 = true;
bd6676c46a56d23b5e6f4702054bbd52e3d6f05fAdam Moore // comma or pipe
bd6676c46a56d23b5e6f4702054bbd52e3d6f05fAdam Moore Y.on('handle|test:event', function(arg1) {
bd6676c46a56d23b5e6f4702054bbd52e3d6f05fAdam Moore Y.Assert.areEqual('orange', arg1);
8c73ff96cdb702124fb8ca87e9135cee38195253Adam Moore fired1 = true;
bd6676c46a56d23b5e6f4702054bbd52e3d6f05fAdam Moore // testing on and after order
9bc9c1474a84983bd254adc2bc425c5b24d25526Adam Moore Y.fire('test:event', 'orange');
9bc9c1474a84983bd254adc2bc425c5b24d25526Adam Moore fired1 = false;
bd6676c46a56d23b5e6f4702054bbd52e3d6f05fAdam Moore fired2 = false;
bd6676c46a56d23b5e6f4702054bbd52e3d6f05fAdam Moore // spaces after the comma or lack thereof should have
bd6676c46a56d23b5e6f4702054bbd52e3d6f05fAdam Moore // no effect on the addition or removal of listeners
bd6676c46a56d23b5e6f4702054bbd52e3d6f05fAdam Moore Y.detach('handle|test:event');
bd6676c46a56d23b5e6f4702054bbd52e3d6f05fAdam Moore // added both an on listener and an after listener,
bd6676c46a56d23b5e6f4702054bbd52e3d6f05fAdam Moore // then detached both
9c69eb57afb13ae0ffed8e442449f04922fe30adAdam Moore Y.fire('test:event', 'orange');
9bc9c1474a84983bd254adc2bc425c5b24d25526Adam Moore testDetachAllByKey: function() {
bd6676c46a56d23b5e6f4702054bbd52e3d6f05fAdam Moore var fired1 = false,
bd6676c46a56d23b5e6f4702054bbd52e3d6f05fAdam Moore fired2 = false;
8aa0880cd494c951e0f4aa7d82d8bdac7692c7d0Adam Moore Y.after('handle|test:event2', function() {
8aa0880cd494c951e0f4aa7d82d8bdac7692c7d0Adam Moore fired2 = true;
efa57736d44cf446f1661497a8645bd388b493fbAdam Moore Y.on('handle|test:event2', function() {
8aa0880cd494c951e0f4aa7d82d8bdac7692c7d0Adam Moore fired1 = true;
efa57736d44cf446f1661497a8645bd388b493fbAdam Moore // detachAll
8aa0880cd494c951e0f4aa7d82d8bdac7692c7d0Adam Moore Y.fire('test:event2');
8aa0880cd494c951e0f4aa7d82d8bdac7692c7d0Adam Moore Y.Assert.isFalse(fired1, 'fired1, the after listener should not have fired.');
8aa0880cd494c951e0f4aa7d82d8bdac7692c7d0Adam Moore Y.Assert.isFalse(fired2, 'fired2, the on listener should not have fired.');
8aa0880cd494c951e0f4aa7d82d8bdac7692c7d0Adam Moore testChain: function() {
8aa0880cd494c951e0f4aa7d82d8bdac7692c7d0Adam Moore var fired1 = false,
8aa0880cd494c951e0f4aa7d82d8bdac7692c7d0Adam Moore fired2 = false,
bd6676c46a56d23b5e6f4702054bbd52e3d6f05fAdam Moore fired3 = false,
bd6676c46a56d23b5e6f4702054bbd52e3d6f05fAdam Moore fired4 = false,
2d71b4319c515f49ca328e3e00bb08d35ed5c161Adam Moore fired5 = false;
2d71b4319c515f49ca328e3e00bb08d35ed5c161Adam Moore // should be executed once, after f2
2d71b4319c515f49ca328e3e00bb08d35ed5c161Adam Moore var f1 = function() {
bd6676c46a56d23b5e6f4702054bbd52e3d6f05fAdam Moore fired1 = true;
bd6676c46a56d23b5e6f4702054bbd52e3d6f05fAdam Moore // should be executed once, before f1
2d71b4319c515f49ca328e3e00bb08d35ed5c161Adam Moore var f2 = function() {
2d71b4319c515f49ca328e3e00bb08d35ed5c161Adam Moore fired2 = true;
2d71b4319c515f49ca328e3e00bb08d35ed5c161Adam Moore // should be executed once, different event from f1 and f2
2d71b4319c515f49ca328e3e00bb08d35ed5c161Adam Moore var f3 = function() {
2d71b4319c515f49ca328e3e00bb08d35ed5c161Adam Moore fired3 = true;
2d71b4319c515f49ca328e3e00bb08d35ed5c161Adam Moore // detached before fired, should not executed
2d71b4319c515f49ca328e3e00bb08d35ed5c161Adam Moore var f4 = function() {
2d71b4319c515f49ca328e3e00bb08d35ed5c161Adam Moore fired4 = true;
2d71b4319c515f49ca328e3e00bb08d35ed5c161Adam Moore // should fire once, preserving the custom prefix rather
2d71b4319c515f49ca328e3e00bb08d35ed5c161Adam Moore // than using the configured event target prefix
2d71b4319c515f49ca328e3e00bb08d35ed5c161Adam Moore var f5 = function() {
2d71b4319c515f49ca328e3e00bb08d35ed5c161Adam Moore fired5 = true;
2d71b4319c515f49ca328e3e00bb08d35ed5c161Adam Moore // configure chaining via global default or on the event target
2d71b4319c515f49ca328e3e00bb08d35ed5c161Adam Moore YUI({ /* chain: true */
2d71b4319c515f49ca328e3e00bb08d35ed5c161Adam Moore }).use('*', function(Y2) {
0dca577a07715960da42d47787eecc25b285182fAdam Moore prefix: 'foo',
0dca577a07715960da42d47787eecc25b285182fAdam Moore chain : true
52671ce4f644d565b2acd71a8ce4f6d20829a67cAdam Moore // without event target prefix manipulation (incomplete now)
2d71b4319c515f49ca328e3e00bb08d35ed5c161Adam Moore // @TODO an error here is throwing an uncaught exception rather than failing the test
2d71b4319c515f49ca328e3e00bb08d35ed5c161Adam Moore // 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');
ba9518d6366a8c1c3a1d027fdc652d92759e101bAdam Moore // with event target prefix manipulation ('e' is the same event as 'foo:e',
2d71b4319c515f49ca328e3e00bb08d35ed5c161Adam Moore // but 'pre:e' is a different event only accessible by using that exact name)
2d71b4319c515f49ca328e3e00bb08d35ed5c161Adam Mooreo.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');
2d71b4319c515f49ca328e3e00bb08d35ed5c161Adam Moore Y.Assert.isTrue(fired1); // verifies chaining, on/after order, and adding the event target prefix
ed130182a3af03d1123fae83204a804c7a2ac0d3Adam Moore Y.Assert.isTrue(fired2); // verifies chaining, on/after order, and accepting the prefix in the event name
2d71b4319c515f49ca328e3e00bb08d35ed5c161Adam Moore Y.Assert.isTrue(fired3); // verifies no interaction between events, and prefix manipulation
ed130182a3af03d1123fae83204a804c7a2ac0d3Adam Moore Y.Assert.isFalse(fired4); // verifies detach works (regardless of spaces after comma)
ed130182a3af03d1123fae83204a804c7a2ac0d3Adam Moore Y.Assert.isTrue(fired5); // verifies custom prefix
ed130182a3af03d1123fae83204a804c7a2ac0d3Adam Moore testObjType: function() {
bd6676c46a56d23b5e6f4702054bbd52e3d6f05fAdam Moore 'y:click': function() {f1 = true},
52671ce4f644d565b2acd71a8ce4f6d20829a67cAdam Moore 'y:clack': function() {f2 = true}
df5cf7dae3c20d8c50c036ea90987ec21f59614aAdam Moore testBubble: function() {
df5cf7dae3c20d8c50c036ea90987ec21f59614aAdam Moore var count = 0,
df5cf7dae3c20d8c50c036ea90987ec21f59614aAdam Moore emitFacade: true,
b3bd569e322a241dcb9aa531d7a7d9ed13766007Adam Moore bubbles: true
4ed6c4c5fd18811cfc57f26a1c593307d1867746Adam Moore a = new Y.EventTarget(config),
4ed6c4c5fd18811cfc57f26a1c593307d1867746Adam Moore b = new Y.EventTarget(config);
4ed6c4c5fd18811cfc57f26a1c593307d1867746Adam Moore // this should not be necessary
4ed6c4c5fd18811cfc57f26a1c593307d1867746Adam Moore a.on('test:foo', function() {
4ed6c4c5fd18811cfc57f26a1c593307d1867746Adam Moore ret = b.fire('test:foo', {}, b);
4ed6c4c5fd18811cfc57f26a1c593307d1867746Adam Moore b.on('test:foo', function(e) {
4ed6c4c5fd18811cfc57f26a1c593307d1867746Adam Moore ret = b.fire('test:foo', {}, b);
4ed6c4c5fd18811cfc57f26a1c593307d1867746Adam Moore testPreventFnOnce: function() {
3f3aa287185afb5d48d7ef0717054a154c372dc9Adam Moore var count = 0;
4ed6c4c5fd18811cfc57f26a1c593307d1867746Adam Moore emitFacade: true,
4ed6c4c5fd18811cfc57f26a1c593307d1867746Adam Moore preventedFn: function() {
4ed6c4c5fd18811cfc57f26a1c593307d1867746Adam Moore Y.Assert.isTrue(this instanceof YUI);
eaa291029af365353cfdc18d7cd1014a2f43bbe4Adam Moore Y.on('y:foo1', function(e) {
eaa291029af365353cfdc18d7cd1014a2f43bbe4Adam Moore Y.on('y:foo1', function(e) {
b3bd569e322a241dcb9aa531d7a7d9ed13766007Adam Moore testDetachHandle: function() {
b3bd569e322a241dcb9aa531d7a7d9ed13766007Adam Moore var count = 0, handle, handle2;
eaa291029af365353cfdc18d7cd1014a2f43bbe4Adam Moore emitFacade: true
5740f3112d19859eebaba7b3b8b95e6bc14beffbAdam Moore Y.on('y:foo', function(e) {
f21a4beaef1cd810a2ca714086ee81ef7753811fAdam Moore handle = Y.on('y:foo', function(e) {
5740f3112d19859eebaba7b3b8b95e6bc14beffbAdam Moore count += 100;
5740f3112d19859eebaba7b3b8b95e6bc14beffbAdam Moore handle2 = Y.on('y:foo', function(e) {
5740f3112d19859eebaba7b3b8b95e6bc14beffbAdam Moore count += 1000;
5740f3112d19859eebaba7b3b8b95e6bc14beffbAdam Moore var handle3 = Y.on('y:click', function() {
5740f3112d19859eebaba7b3b8b95e6bc14beffbAdam Moore var o = new Y.EventTarget();
5740f3112d19859eebaba7b3b8b95e6bc14beffbAdam Moore o.on('foo', function(e) {
fb49666327c2cb6ea5a7d2dea5160b649bc07c51Adam Moore o.on('foo', function(e) {
5740f3112d19859eebaba7b3b8b95e6bc14beffbAdam Moore var handle3 = Y.on('y:click', function() {
fb49666327c2cb6ea5a7d2dea5160b649bc07c51Adam Moore // detachAll can't be allowed to work on the YUI instance.
fb49666327c2cb6ea5a7d2dea5160b649bc07c51Adam Moore testBroadcast: function() {
fb49666327c2cb6ea5a7d2dea5160b649bc07c51Adam Moore var o = new Y.EventTarget(), s1, s2, s3, s4;
fb49666327c2cb6ea5a7d2dea5160b649bc07c51Adam Moore emitFacade: true,
fb49666327c2cb6ea5a7d2dea5160b649bc07c51Adam Moore broadcast: 1
13060ea8e194930917f0243edd6ca469a91472e8Adam Moore Y.on('y:foo2', function() {
0f2f588af92633581627b768ccac61af079d87cfAdam Moore Y.log('Y foo2 executed');
0f2f588af92633581627b768ccac61af079d87cfAdam Moore Y.Global.on('y:foo2', function() {
0f2f588af92633581627b768ccac61af079d87cfAdam Moore Y.log('GLOBAL foo2 executed');
0f2f588af92633581627b768ccac61af079d87cfAdam Moore emitFacade: true,
0f2f588af92633581627b768ccac61af079d87cfAdam Moore broadcast: 2
0f2f588af92633581627b768ccac61af079d87cfAdam Moore Y.on('y:bar', function() {
0f2f588af92633581627b768ccac61af079d87cfAdam Moore Y.log('Y bar executed');
0f2f588af92633581627b768ccac61af079d87cfAdam Moore Y.Global.on('y:bar', function() {
0f2f588af92633581627b768ccac61af079d87cfAdam Moore Y.log('GLOBAL bar executed');
0f2f588af92633581627b768ccac61af079d87cfAdam Moore Y.Test.Runner.add(testEventTarget);
7135bc481c626e02f80b94c6d52cf9a13c3a38f7Adam Moore // base: "/build/",
7135bc481c626e02f80b94c6d52cf9a13c3a38f7Adam Moore // filter: "debug",
7135bc481c626e02f80b94c6d52cf9a13c3a38f7Adam Moore // combine: false,
7135bc481c626e02f80b94c6d52cf9a13c3a38f7Adam Moore // useConsole: true,
7135bc481c626e02f80b94c6d52cf9a13c3a38f7Adam Moore // logExclude: {Dom: true, Selector: true, Node: true, attribute: true, base: true, loader: true, get: true, widget: true}
7135bc481c626e02f80b94c6d52cf9a13c3a38f7Adam Moore // }).use("datasource", function(Y) {