Created
November 11, 2011 00:15
-
-
Save sdesai/1356718 to your computer and use it in GitHub Desktop.
Event Bubbling From Same Typed Objects
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |
| <title>EventTarget And Homogeneous Bubbling</title> | |
| <script type="text/javascript" src="/YuiWip/yui3/build/yui/yui.js"></script> | |
| </head> | |
| <body> | |
| <script type="text/javascript"> | |
| YUI({filter: "raw"}).use("node", "event-custom", function (Y) { | |
| function Emitter(id) { | |
| this.id = id; | |
| this.publishFoo(); | |
| this.listenForFoo(); | |
| }; | |
| Emitter.prototype = { | |
| publishFoo: function() { | |
| this.publish("foo", { | |
| defaultTargetOnly: true, | |
| defaultFn: function() { | |
| console.log(this.id + ": defaultFn called"); | |
| } | |
| }); | |
| }, | |
| updateFoo : function(val) { | |
| this.fire("foo", {payload:val}); | |
| }, | |
| fooListener : function(e) { | |
| this._foo = e.payload; | |
| console.log(this.id + ": I think my state changed. " + this.id + "._foo = " + this._foo); | |
| }, | |
| listenForFoo: function() { | |
| // Current broken behavior | |
| this.after("foo", this.fooListener); | |
| /* Solutions */ | |
| // 1. Localized ... | |
| /* | |
| this.after("foo", function(e) { | |
| if (e.target === this) { | |
| this.fooListener(e); | |
| } | |
| }); | |
| // *EVERY* internal listener ever created would need to add the wrap, | |
| // in case it was ever part of a homogeneous addTarget structure. | |
| // 2. Localized, but Encapsulated ... | |
| /* | |
| this.after("foo", Y.bindToTarget(this.fooListener, this)); | |
| // *EVERY* internal listener ever created would need to add the wrap, | |
| // in case it was ever part of a homogeneous addTarget structure. | |
| */ | |
| // 3. Centralized ... | |
| /* Require different call for "internal" listeners: | |
| this.afterForThisTargetOnly("foo", this.fooListener); | |
| // Or (CURRENT FRONT RUNNER) ... | |
| this.after("foo", this.fooListener, {targetOnly:true}); // Also support targetOnly:ET | |
| */ | |
| // 4. Centralized ... visa-versa | |
| /* Require different call for "bubble" listeners: | |
| // Need to be explicit if you want to listen for homogeneous bubbles (rarer), | |
| // Breaks back-compat for this.after("foo", fnIExpectToCaptureBubbledEvents); | |
| this.afterBubbled("foo", this.fooListener); | |
| */ | |
| // 5. Centralized ... Holy Grail | |
| /* | |
| Same call just works for both, and we're able to identify whether to add | |
| e.target === this wrapper, based on some other state [ addTarget called etc. ] | |
| Don't even think this makes sense, since we're trying to infer user intention | |
| (are they trying to listen for bubbled events, or just their own), but it's up | |
| there for completeness. | |
| this.after("foo", this.fooListener); | |
| */ | |
| } | |
| }; | |
| Y.augment( | |
| Emitter, | |
| Y.EventTarget, | |
| null, | |
| null, | |
| [{ | |
| emitFacade:true, | |
| bubbles:true, | |
| prefix:'emitter' | |
| }] | |
| ); | |
| var e1 = new Emitter("e1"); | |
| var e2 = new Emitter("e2"); | |
| e1.updateFoo("a"); | |
| e2.updateFoo("b"); | |
| console.log("------"); | |
| var e3 = new Emitter("e3"); | |
| var e4 = new Emitter("e4"); | |
| e3.addTarget(e4); | |
| e3.updateFoo("c"); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment