Events Evolved                                Luke Smith                               yuilibrary: lsmith                 ...
<input type="button" onclick="doSomething();">     YUICONF 2009Monday, January 17, 2011
<input type="button" onclick="doSomething();">     YUICONF 2009Monday, January 17, 2011
<input type="button" onclick="doSomething();">        button.onclick = doSomething;     YUICONF 2009Monday, January 17, 2011
<input type="button" onclick="doSomething();">        button.onclick = doSomething;     YUICONF 2009Monday, January 17, 2011
<input type="button" onclick="doSomething();">        button.onclick = doSomething;        button.addEventListener(click, ...
<input type="button" onclick="doSomething();">        button.onclick = doSomething;        button.addEventListener(click, ...
<input type="button" onclick="doSomething();">        button.onclick = doSomething;        button.addEventListener(click, ...
if (button.addEventListener) {        button.addEventListener(click, doSomething, false);    } else if (button.attachEvent...
if (button.addEventListener) {        button.addEventListener(click, doSomething, false);    } else if (button.attachEvent...
<input type="button" onclick="doSomething();">        button.onclick = doSomething;        button.addEventListener(click, ...
<input type="button" onclick="doSomething();">        button.onclick = doSomething;        button.addEventListener(click, ...
function doSomething(e) {                 if (e && e.preventDefault) {                     e.preventDefault();            ...
function doSomething(e) {                 if (e && e.preventDefault) {                     e.preventDefault();            ...
function doSomething(e) {                 if (e && e.preventDefault) {                     e.preventDefault();            ...
<input type="button" onclick="doSomething();">        button.onclick = doSomething;        button.addEventListener(click, ...
<input type="button" onclick="doSomething();">        button.onclick = doSomething;        button.addEventListener(click, ...
YUI 2       YAHOO.util.Event.on(button,click,doSomething);     YUICONF 2009Monday, January 17, 2011
YUI 2       YAHOO.util.Event.on(button,click,doSomething);       YAHOO.util.Event.preventDefault(e);     YUICONF 2009Monda...
YUI 2       YAHOO.util.Event.on(button,click,doSomething);       YAHOO.util.Event.preventDefault(e);                      ...
YUI 2       YAHOO.util.Event.on(button,click,doSomething);       YAHOO.util.Event.preventDefault(e);                      ...
YUI 2       YAHOO.util.Event.on(button,click,doSomething);       YAHOO.util.Event.preventDefault(e);                      ...
YUI 3       button.on(click, doSomething);       e.preventDefault();     YUICONF 2009Monday, January 17, 2011
YUI 3       button.on(click, doSomething);       e.preventDefault();                           ✓ Normalized subscription  ...
YUI 3       button.on(click, doSomething);       e.preventDefault();                           ✓ Normalized subscription  ...
YUI 3       button.on(click, doSomething);       e.preventDefault();                           ✓ Normalized subscription  ...
YUI 3       button.on(click, doSomething);       e.preventDefault();                           ✓ Normalized subscription  ...
YUI 3       button.on(click, doSomething);       e.preventDefault();                           ✓ Normalized subscription  ...
We give you the DOM     YUICONF 2009Monday, January 17, 2011
We give you the DOM                           ... but it works     YUICONF 2009Monday, January 17, 2011
You are here     YUICONF 2009Monday, January 17, 2011
Custom Events                               YUI 2     YUICONF 2009Monday, January 17, 2011
Custom Events                               YUI 2        this.myEvent =            new YAHOO.util.CustomEvent("myEvent"); ...
Custom Events                               YUI 2        instance.subscribe("myEvent",doSomething);        this.fireEvent(...
Custom Events                               YUI 3          instance.on("myEvent", doSomething);          this.fire("myEven...
Custom Events                               YUI 3          this.publish("myEvent", config);          instance.on("myEvent"...
Y.extend( MyClass, Y.EventTarget );           Y.EventTarget            ✓ Event API     YUICONF 2009Monday, January 17, 2011
Y.extend( MyClass, Y.Base );           Y.EventTarget      Y.Base            ✓ Event API    ✓ Event API                    ...
Y.extend( MyClass, Y.Widget );           Y.EventTarget      Y.Base       Y.Widget            ✓ Event API    ✓ Event API   ...
Y.extend( MyClass, Y.Widget );           Y.EventTarget      Y.Base       Y.Widget            ✓ Event API    ✓ Event API   ...
Y.extend( MyClass, Y.Base );                Y.EventTarget                  Y.Widget                                   Y.Ba...
Normalized subscription        ✓ DOM events          button.on("click", doSomething);       ✓ Custom events          insta...
Unified subscription        ✓ DOM events          button.on("click", doSomething);       ✓ Custom events          instance...
Your App                                    Event API                       DOM Events       Module/App Events     YUICONF...
Custom                           DOM                                 Events     YUICONF 2009Monday, January 17, 2011
Custom                                    DOM                           Events     YUICONF 2009Monday, January 17, 2011
Custom Events more DOM like                           ✓ Unify Subscription API                           - Default behavio...
Custom Events more DOM like            ✓ Unify Subscription API   foo.on(event, fn)            - Default behaviors        ...
Custom Events more DOM like            ✓ Unify Subscription API            - Default behaviors                            ...
Custom Events more DOM like                   Default behaviors     YUICONF 2009Monday, January 17, 2011
Custom Events                               YUI 3          this.publish("myEvent", config);          instance.on("myEvent"...
Custom Events                               YUI 3          this.publish("myEvent", config);     YUICONF 2009Monday, Januar...
Default behaviors                                  this.publish( name, config );          initializer: function () {      ...
Default behaviors                                  this.publish( name, config );          initializer: function () {      ...
Default behaviors          initializer: function () { ... },          _defStartFn: function (e) {                         ...
Event payload          e.time          e.urgency          this.fire("start", payload);     YUICONF 2009Monday, January 17,...
Event payload          e.time          e.urgency          this.fire("start", {              time: new Date(),             ...
instance.on("start", doSomething);           this.fire("start");     YUICONF 2009Monday, January 17, 2011
instance.on("start", doSomething);           this.fire("start");             execute subscribers                          ...
prevented?             Behavior is preventable               function doSomething(e) {                           if (e.urg...
... but it doesnt have to be          initializer: function () {                           this.publish("start", {        ...
... but it doesnt have to be          initializer: function () {                           this.publish("start", {        ...
YUICONF 2009Monday, January 17, 2011
Dogfood (nom)     cache.js       initializer: function () {           this.publish("add", {               defaultFn: this....
Dogfood (nom)     console.js       initializer: function () {           this.publish(ENTRY, {               defaultFn: thi...
Dogfood (nom)     datasource.js       initializer: function () {           this.publish("request", {               default...
Dogfood (nom)     drag.js       initializer: function () {           this.publish(EV_MOUSE_DOWN, {               defaultFn...
Dogfood (nom)     slider.js       initializer: function () {           this.publish(SYNC, {               defaultFn: this....
Dogfood (nom)     async-queue.js       this.publish({             execute: { defaultFn : this._defExecFn },             sh...
We love default behaviors                           You should, too     YUICONF 2009Monday, January 17, 2011
Custom Events more DOM like            ✓ Unify Subscription API            ✓ Default behaviors            - Bubbling     Y...
Custom Events more DOM like                   Bubbling     YUICONF 2009Monday, January 17, 2011
Bubbling          initializer: function () {                           this.publish("start", {                            ...
Bubbling          initializer: function () {                           this.publish("start", {                            ...
Bubbling          initializer: function () {                           this.publish("start", {                            ...
Event Delegation        <UL>             <li>one</li>             <li>two</li>                                Y.all(li)   ...
Event Delegation        <UL>             <li>one</li>             <li>two</li>                                Y.all(li)   ...
Event Delegation        <UL>                   Y.one(ul)                                .on(click, sayHi);             <li...
Event Delegation        <UL>                   Y.one(ul)                                .on(click, sayHi);             <li...
Event Delegation        <UL>                   Y.one(ul).delegate(                                     click,sayHi,li);   ...
Event Delegation        <UL>                   Y.one(ul).delegate(                                     click,sayHi,li);   ...
Event Delegation            instance1         instance1.on(start, sayHi);           instance2          instance2.on(start,...
Event Delegation                                     6 subscriptions            instance1         instance1.on(start, sayH...
Event Delegation     ManagerClass             Mgr.on(foo:start, sayHi);            instance1           instance2          ...
Event Delegation     ManagerClass             Mgr.on(foo:start, sayHi);            instance1           instance2          ...
Event Delegation     ManagerClass             Mgr.on(foo:start, sayHi);            instance1           instance2          ...
Dogfood        Drag and Drop          var draggable = new Y.DD.Drag({              node: #dragme          });          dra...
Dogfood        Drag and Drop          var draggable = new Y.DD.Drag({              node: #dragme          });          Y.D...
Dogfood        Y.Global          Y.on(yui:log, doSomething);          Y.Global.on(yui:log, doSomething);     YUICONF 2009M...
Custom Events more DOM like            ✓ Unify Subscription API            ✓ Default behaviors            ✓ Bubbling     Y...
Custom                                    DOM                           Events     YUICONF 2009Monday, January 17, 2011
Above and beyond     YUICONF 2009Monday, January 17, 2011
Above and beyond                           - Subscription context override     YUICONF 2009Monday, January 17, 2011
Above and beyond                           - Subscription context override                           - Subscription payloa...
Above and beyond                           - Subscription context override                           - Subscription payloa...
Above and beyond                           - Subscription context override                           - Subscription payloa...
Above and beyond                           - Subscription context override                           - Subscription payloa...
on()++          instance.on("start", myObj.startHandler);     YUICONF 2009Monday, January 17, 2011
on()++          instance.on("start",              Y.bind(myObj.startHandler, myObj));     YUICONF 2009Monday, January 17, ...
on()++          instance.on("start",              myObj.startHandler, myObj);          instance.on(event, handler, context...
on()++          node.on("click",              myObj.clickHandler, myObj);          instance.on(event, handler, context);  ...
on()++          instance.on("start", myObj.startHandler);     YUICONF 2009Monday, January 17, 2011
on()++          instance.on("start",              Y.rbind(myObj.startHandler, myObj,                  1, new Date(), { foo...
on()++          instance.on("start",              myObj.startHandler, myObj,              1, new Date(), { foo: "bar" }); ...
on()++          instance.on("start",              myObj.startHandler, myObj,              1, new Date(), { foo: "bar" }); ...
Above and beyond                           ✓ Subscription context override                           ✓ Subscription payloa...
Above and beyond                           ✓ Subscription context override                           ✓ Subscription payloa...
Handles and categories       button.detach("click", doSomething);     YUICONF 2009Monday, January 17, 2011
Handles and categories       button.detach("click", doSomething);       var sub = button.on("click", doSomething);       s...
Handles and categories       button.detach("click", doSomething);       var sub = button.on("click", doSomething);       s...
Handles and categories       button.detach("click", doSomething);       var sub = button.on("click", doSomething);       s...
Above and beyond                           ✓ Subscription context override                           ✓ Subscription payloa...
Above and beyond                           ✓ Subscription context override                           ✓ Subscription payloa...
event   instance.on(event,handler)                                           _defEventFn                instance     YUICO...
event   instance.on(event,handler)                                           _defEventFn                               ins...
Y.Base            ✓ Event API            ✓ Attributes    After moments            ✓ Plugins          this.after("attrChang...
Y.Base            ✓ Event API            ✓ Attributes              After moments            ✓ Plugins          this.after(...
event   instance.on(event,handler)                                           _defEventFn                               ins...
State UNCHANGED                       event   instance.on(event,handler)                                           _defEve...
State UNCHANGED                       event       instance.on(event,handler)                               Change state   ...
State UNCHANGED                       event       instance.on(event,handler)                               Change state   ...
YUICONF 2009Monday, January 17, 2011
Above and beyond                           ✓ Subscription context override                           ✓ Subscription payloa...
Above and beyond                           ✓ Subscription context override                           ✓ Subscription payloa...
DOM++          Y.Env.evt.plugins.YOUR_EVENT =          Y.Node.DOM_EVENTS.YOUR_EVENT = {                           on: func...
DOM++          Y.Env.evt.plugins.YOUR_EVENT =          Y.Node.DOM_EVENTS.YOUR_EVENT = {                           on: func...
Konami          Y.Env.evt.plugins.konami =          Y.Node.DOM_EVENTS.konami = {          }     YUICONF 2009Monday, Januar...
Konami          Y.Env.evt.plugins.konami =          Y.Node.DOM_EVENTS.konami = {            on: function (type, fn, ctx) {...
Using your event          node.on(konami, addUnicorns);     YUICONF 2009Monday, January 17, 2011
Above and beyond                           ✓ Subscription context override                           ✓ Subscription payloa...
Summary                                    ✓ Unified subscription                                    ✓ Default behaviors  ...
Rethink how you use events     YUICONF 2009Monday, January 17, 2011
Rethink how you build your apps     YUICONF 2009Monday, January 17, 2011
Image credit                     http://www.redandgreen.org/R2Kphotos2.htm (revolution)                     http://www.vin...
Upcoming SlideShare
Loading in …5
×

YUI 3: Events Evolved

4,742 views

Published on

An overview of some of the features in YUI 3's event system. Presented at YUIConf 2009.

Published in: Technology, Design
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,742
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
51
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

YUI 3: Events Evolved

  1. 1. Events Evolved Luke Smith yuilibrary: lsmith github: lsmith twitter: @ls_n YUICONF 2009Monday, January 17, 2011
  2. 2. <input type="button" onclick="doSomething();"> YUICONF 2009Monday, January 17, 2011
  3. 3. <input type="button" onclick="doSomething();"> YUICONF 2009Monday, January 17, 2011
  4. 4. <input type="button" onclick="doSomething();"> button.onclick = doSomething; YUICONF 2009Monday, January 17, 2011
  5. 5. <input type="button" onclick="doSomething();"> button.onclick = doSomething; YUICONF 2009Monday, January 17, 2011
  6. 6. <input type="button" onclick="doSomething();"> button.onclick = doSomething; button.addEventListener(click, doSomething, false); YUICONF 2009Monday, January 17, 2011
  7. 7. <input type="button" onclick="doSomething();"> button.onclick = doSomething; button.addEventListener(click, doSomething, false); YUICONF 2009Monday, January 17, 2011
  8. 8. <input type="button" onclick="doSomething();"> button.onclick = doSomething; button.addEventListener(click, doSomething, false); YUICONF 2009Monday, January 17, 2011
  9. 9. if (button.addEventListener) { button.addEventListener(click, doSomething, false); } else if (button.attachEvent) { button.attachEvent(click, doSomething); } else { button.onclick = doSomething; } YUICONF 2009Monday, January 17, 2011
  10. 10. if (button.addEventListener) { button.addEventListener(click, doSomething, false); } else if (button.attachEvent) { button.attachEvent(click, doSomething); } else { button.onclick = doSomething; } DUMB YUICONF 2009Monday, January 17, 2011
  11. 11. <input type="button" onclick="doSomething();"> button.onclick = doSomething; button.addEventListener(click, doSomething, false); if (button.addEventListener) { /* madness */ } YUICONF 2009Monday, January 17, 2011
  12. 12. <input type="button" onclick="doSomething();"> button.onclick = doSomething; button.addEventListener(click, doSomething, false); if (button.addEventListener) { /* madness */ } addEvent(button, click, doSomething); YUICONF 2009Monday, January 17, 2011
  13. 13. function doSomething(e) { if (e && e.preventDefault) { e.preventDefault(); } return false; } YUICONF 2009Monday, January 17, 2011
  14. 14. function doSomething(e) { if (e && e.preventDefault) { e.preventDefault(); } return false; } YUICONF 2009Monday, January 17, 2011
  15. 15. function doSomething(e) { if (e && e.preventDefault) { e.preventDefault(); } return false; } Weve been through this YUICONF 2009Monday, January 17, 2011
  16. 16. <input type="button" onclick="doSomething();"> button.onclick = doSomething; button.addEventListener(click, doSomething, false); if (button.addEventListener) { /* madness */ } addEvent(button, click, doSomething); YUICONF 2009Monday, January 17, 2011
  17. 17. <input type="button" onclick="doSomething();"> button.onclick = doSomething; button.addEventListener(click, doSomething, false); if (button.addEventListener) { /* madness */ } addEvent(button, click, doSomething); YUICONF 2009Monday, January 17, 2011
  18. 18. YUI 2 YAHOO.util.Event.on(button,click,doSomething); YUICONF 2009Monday, January 17, 2011
  19. 19. YUI 2 YAHOO.util.Event.on(button,click,doSomething); YAHOO.util.Event.preventDefault(e); YUICONF 2009Monday, January 17, 2011
  20. 20. YUI 2 YAHOO.util.Event.on(button,click,doSomething); YAHOO.util.Event.preventDefault(e); ✓ Normalized subscription YUICONF 2009Monday, January 17, 2011
  21. 21. YUI 2 YAHOO.util.Event.on(button,click,doSomething); YAHOO.util.Event.preventDefault(e); ✓ Normalized subscription ✓ Normalized event handling YUICONF 2009Monday, January 17, 2011
  22. 22. YUI 2 YAHOO.util.Event.on(button,click,doSomething); YAHOO.util.Event.preventDefault(e); ✓ Normalized subscription ✓ Normalized event handling ✓ DOM-like method names YUICONF 2009Monday, January 17, 2011
  23. 23. YUI 3 button.on(click, doSomething); e.preventDefault(); YUICONF 2009Monday, January 17, 2011
  24. 24. YUI 3 button.on(click, doSomething); e.preventDefault(); ✓ Normalized subscription YUICONF 2009Monday, January 17, 2011
  25. 25. YUI 3 button.on(click, doSomething); e.preventDefault(); ✓ Normalized subscription ✓ Normalized event handling YUICONF 2009Monday, January 17, 2011
  26. 26. YUI 3 button.on(click, doSomething); e.preventDefault(); ✓ Normalized subscription ✓ Normalized event handling ✓ DOM-like method names YUICONF 2009Monday, January 17, 2011
  27. 27. YUI 3 button.on(click, doSomething); e.preventDefault(); ✓ Normalized subscription ✓ Normalized event handling ✓ DOM-like method names ✓ DOM-like context YUICONF 2009Monday, January 17, 2011
  28. 28. YUI 3 button.on(click, doSomething); e.preventDefault(); ✓ Normalized subscription ✓ Normalized event handling ✓ DOM-like method names ✓ DOM-like context ✓ Terse YUICONF 2009Monday, January 17, 2011
  29. 29. We give you the DOM YUICONF 2009Monday, January 17, 2011
  30. 30. We give you the DOM ... but it works YUICONF 2009Monday, January 17, 2011
  31. 31. You are here YUICONF 2009Monday, January 17, 2011
  32. 32. Custom Events YUI 2 YUICONF 2009Monday, January 17, 2011
  33. 33. Custom Events YUI 2 this.myEvent = new YAHOO.util.CustomEvent("myEvent"); instance.myEvent.subscribe(doSomething); this.myEvent.fire(); YUICONF 2009Monday, January 17, 2011
  34. 34. Custom Events YUI 2 instance.subscribe("myEvent",doSomething); this.fireEvent("myEvent"); YUICONF 2009Monday, January 17, 2011
  35. 35. Custom Events YUI 3 instance.on("myEvent", doSomething); this.fire("myEvent"); YUICONF 2009Monday, January 17, 2011
  36. 36. Custom Events YUI 3 this.publish("myEvent", config); instance.on("myEvent", doSomething); this.fire("myEvent"); YUICONF 2009Monday, January 17, 2011
  37. 37. Y.extend( MyClass, Y.EventTarget ); Y.EventTarget ✓ Event API YUICONF 2009Monday, January 17, 2011
  38. 38. Y.extend( MyClass, Y.Base ); Y.EventTarget Y.Base ✓ Event API ✓ Event API ✓ Attributes ✓ Plugins YUICONF 2009Monday, January 17, 2011
  39. 39. Y.extend( MyClass, Y.Widget ); Y.EventTarget Y.Base Y.Widget ✓ Event API ✓ Event API ✓ Event API ✓ Attributes ✓ Attributes ✓ Plugins ✓ Plugins ✓ UI Lifecycle YUICONF 2009Monday, January 17, 2011
  40. 40. Y.extend( MyClass, Y.Widget ); Y.EventTarget Y.Base Y.Widget ✓ Event API ✓ Event API ✓ Event API ✓ Attributes ✓ Attributes ✓ Plugins ✓ Plugins ✓ UI Lifecycle YUICONF 2009Monday, January 17, 2011
  41. 41. Y.extend( MyClass, Y.Base ); Y.EventTarget Y.Widget Y.Base ✓ Event API ✓ Event API ✓ ✓ Event API ✓ Attributes Plugins ✓ Attributes ✓ UI Lifecycle ✓ Plugins YUICONF 2009Monday, January 17, 2011
  42. 42. Normalized subscription ✓ DOM events button.on("click", doSomething); ✓ Custom events instance.on("myEvent", doSomething); YUICONF 2009Monday, January 17, 2011
  43. 43. Unified subscription ✓ DOM events button.on("click", doSomething); ✓ Custom events instance.on("myEvent", doSomething); YUICONF 2009Monday, January 17, 2011
  44. 44. Your App Event API DOM Events Module/App Events YUICONF 2009Monday, January 17, 2011
  45. 45. Custom DOM Events YUICONF 2009Monday, January 17, 2011
  46. 46. Custom DOM Events YUICONF 2009Monday, January 17, 2011
  47. 47. Custom Events more DOM like ✓ Unify Subscription API - Default behaviors - Bubbling YUICONF 2009Monday, January 17, 2011
  48. 48. Custom Events more DOM like ✓ Unify Subscription API foo.on(event, fn) - Default behaviors - Bubbling YUICONF 2009Monday, January 17, 2011
  49. 49. Custom Events more DOM like ✓ Unify Subscription API - Default behaviors this.publish(...) - Bubbling YUICONF 2009Monday, January 17, 2011
  50. 50. Custom Events more DOM like Default behaviors YUICONF 2009Monday, January 17, 2011
  51. 51. Custom Events YUI 3 this.publish("myEvent", config); instance.on("myEvent", doSomething); this.fire("myEvent"); YUICONF 2009Monday, January 17, 2011
  52. 52. Custom Events YUI 3 this.publish("myEvent", config); YUICONF 2009Monday, January 17, 2011
  53. 53. Default behaviors this.publish( name, config ); initializer: function () { this.publish("start", { defaultFn: this._defStartFn }); } YUICONF 2009Monday, January 17, 2011
  54. 54. Default behaviors this.publish( name, config ); initializer: function () { this.publish("start", { defaultFn: this._defStartFn }); } YUICONF 2009Monday, January 17, 2011
  55. 55. Default behaviors initializer: function () { ... }, _defStartFn: function (e) { Y.log("started " + e.time); this._disableControls(); this._getGoing(e.urgency); } YUICONF 2009Monday, January 17, 2011
  56. 56. Event payload e.time e.urgency this.fire("start", payload); YUICONF 2009Monday, January 17, 2011
  57. 57. Event payload e.time e.urgency this.fire("start", { time: new Date(), urgency: ASAP }); YUICONF 2009Monday, January 17, 2011
  58. 58. instance.on("start", doSomething); this.fire("start"); YUICONF 2009Monday, January 17, 2011
  59. 59. instance.on("start", doSomething); this.fire("start"); execute subscribers end yes prevented? _defStartFn no YUICONF 2009Monday, January 17, 2011
  60. 60. prevented? Behavior is preventable function doSomething(e) { if (e.urgency === ASAP) { e.preventDefault(); } } YUICONF 2009Monday, January 17, 2011
  61. 61. ... but it doesnt have to be initializer: function () { this.publish("start", { defaultFn: this._defStartFn, preventable: false }); } YUICONF 2009Monday, January 17, 2011
  62. 62. ... but it doesnt have to be initializer: function () { this.publish("start", { defaultFn: this._defStartFn, preventedFn: this._prvStartFn }); } YUICONF 2009Monday, January 17, 2011
  63. 63. YUICONF 2009Monday, January 17, 2011
  64. 64. Dogfood (nom) cache.js initializer: function () { this.publish("add", { defaultFn: this._defAddFn }); this.publish("flush", { defaultFn: this._defFlushFn }); } YUICONF 2009Monday, January 17, 2011
  65. 65. Dogfood (nom) console.js initializer: function () { this.publish(ENTRY, { defaultFn: this._defEntryFn }); this.publish(RESET, { defaultFn: this._defResetFn }); } YUICONF 2009Monday, January 17, 2011
  66. 66. Dogfood (nom) datasource.js initializer: function () { this.publish("request", { defaultFn: Y.bind("_defRequestFn", this), queuable:true }); ... } YUICONF 2009Monday, January 17, 2011
  67. 67. Dogfood (nom) drag.js initializer: function () { this.publish(EV_MOUSE_DOWN, { defaultFn: this._defMouseDownFn, bubbles: true }); ... } YUICONF 2009Monday, January 17, 2011
  68. 68. Dogfood (nom) slider.js initializer: function () { this.publish(SYNC, { defaultFn: this._defSyncFn }); this.publish(POSITION_THUMB, { defaultFn: this._defPositionThumbFn }); } YUICONF 2009Monday, January 17, 2011
  69. 69. Dogfood (nom) async-queue.js this.publish({ execute: { defaultFn : this._defExecFn }, shift : { defaultFn : this._defShiftFn }, add : { defaultFn : this._defAddFn }, promote: { defaultFn : this._defPromoteFn }, remove : { defaultFn : this._defRemoveFn } }); YUICONF 2009Monday, January 17, 2011
  70. 70. We love default behaviors You should, too YUICONF 2009Monday, January 17, 2011
  71. 71. Custom Events more DOM like ✓ Unify Subscription API ✓ Default behaviors - Bubbling YUICONF 2009Monday, January 17, 2011
  72. 72. Custom Events more DOM like Bubbling YUICONF 2009Monday, January 17, 2011
  73. 73. Bubbling initializer: function () { this.publish("start", { bubbles: true }); this.addTarget(host); } YUICONF 2009Monday, January 17, 2011
  74. 74. Bubbling initializer: function () { this.publish("start", { broadcast: 1 }); } YUICONF 2009Monday, January 17, 2011
  75. 75. Bubbling initializer: function () { this.publish("start", { bubbles: true, stoppedFn: this._stopStartFn }); } YUICONF 2009Monday, January 17, 2011
  76. 76. Event Delegation <UL> <li>one</li> <li>two</li> Y.all(li) <li>three</li> .on(click, sayHi); <li>four</li> <li>five</li> <li>six</li> YUICONF 2009Monday, January 17, 2011
  77. 77. Event Delegation <UL> <li>one</li> <li>two</li> Y.all(li) <li>three</li> .on(click, sayHi); <li>four</li> <li>five</li> 6 subscriptions <li>six</li> YUICONF 2009Monday, January 17, 2011
  78. 78. Event Delegation <UL> Y.one(ul) .on(click, sayHi); <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> <li>six</li> YUICONF 2009Monday, January 17, 2011
  79. 79. Event Delegation <UL> Y.one(ul) .on(click, sayHi); <li>one</li> <li>two</li> 1 subscription <li>three</li> <li>four</li> <li>five</li> <li>six</li> YUICONF 2009Monday, January 17, 2011
  80. 80. Event Delegation <UL> Y.one(ul).delegate( click,sayHi,li); <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> <li>six</li> YUICONF 2009Monday, January 17, 2011
  81. 81. Event Delegation <UL> Y.one(ul).delegate( click,sayHi,li); <li>one</li> <li>two</li> 1 subscription <li>three</li> <li>four</li> <li>five</li> <li>six</li> YUICONF 2009Monday, January 17, 2011
  82. 82. Event Delegation instance1 instance1.on(start, sayHi); instance2 instance2.on(start, sayHi); instance3 instance3.on(start, sayHi); instance4 instance4.on(start, sayHi); instance5 instance5.on(start, sayHi); instance6 instance6.on(start, sayHi); YUICONF 2009Monday, January 17, 2011
  83. 83. Event Delegation 6 subscriptions instance1 instance1.on(start, sayHi); instance2 instance2.on(start, sayHi); instance3 instance3.on(start, sayHi); instance4 instance4.on(start, sayHi); instance5 instance5.on(start, sayHi); instance6 instance6.on(start, sayHi); YUICONF 2009Monday, January 17, 2011
  84. 84. Event Delegation ManagerClass Mgr.on(foo:start, sayHi); instance1 instance2 instance3 instance4 instance5 instance6 YUICONF 2009Monday, January 17, 2011
  85. 85. Event Delegation ManagerClass Mgr.on(foo:start, sayHi); instance1 instance2 1 subscription instance3 instance4 instance5 instance6 YUICONF 2009Monday, January 17, 2011
  86. 86. Event Delegation ManagerClass Mgr.on(foo:start, sayHi); instance1 instance2 1 subscription instance3 instance4 initializer: function () { this.addTarget( instance5 this.get("host"); ); instance6 } YUICONF 2009Monday, January 17, 2011
  87. 87. Dogfood Drag and Drop var draggable = new Y.DD.Drag({ node: #dragme }); draggable.on(start, doSomething); YUICONF 2009Monday, January 17, 2011
  88. 88. Dogfood Drag and Drop var draggable = new Y.DD.Drag({ node: #dragme }); Y.DD.DDM.on(drag:start, doSomething); YUICONF 2009Monday, January 17, 2011
  89. 89. Dogfood Y.Global Y.on(yui:log, doSomething); Y.Global.on(yui:log, doSomething); YUICONF 2009Monday, January 17, 2011
  90. 90. Custom Events more DOM like ✓ Unify Subscription API ✓ Default behaviors ✓ Bubbling YUICONF 2009Monday, January 17, 2011
  91. 91. Custom DOM Events YUICONF 2009Monday, January 17, 2011
  92. 92. Above and beyond YUICONF 2009Monday, January 17, 2011
  93. 93. Above and beyond - Subscription context override YUICONF 2009Monday, January 17, 2011
  94. 94. Above and beyond - Subscription context override - Subscription payload YUICONF 2009Monday, January 17, 2011
  95. 95. Above and beyond - Subscription context override - Subscription payload - Easy event detach YUICONF 2009Monday, January 17, 2011
  96. 96. Above and beyond - Subscription context override - Subscription payload - Easy event detach - "After" subscriptions YUICONF 2009Monday, January 17, 2011
  97. 97. Above and beyond - Subscription context override - Subscription payload - Easy event detach - "After" subscriptions - New DOM events YUICONF 2009Monday, January 17, 2011
  98. 98. on()++ instance.on("start", myObj.startHandler); YUICONF 2009Monday, January 17, 2011
  99. 99. on()++ instance.on("start", Y.bind(myObj.startHandler, myObj)); YUICONF 2009Monday, January 17, 2011
  100. 100. on()++ instance.on("start", myObj.startHandler, myObj); instance.on(event, handler, context); YUICONF 2009Monday, January 17, 2011
  101. 101. on()++ node.on("click", myObj.clickHandler, myObj); instance.on(event, handler, context); node.on(event, handler, context); YUICONF 2009Monday, January 17, 2011
  102. 102. on()++ instance.on("start", myObj.startHandler); YUICONF 2009Monday, January 17, 2011
  103. 103. on()++ instance.on("start", Y.rbind(myObj.startHandler, myObj, 1, new Date(), { foo: "bar" })); YUICONF 2009Monday, January 17, 2011
  104. 104. on()++ instance.on("start", myObj.startHandler, myObj, 1, new Date(), { foo: "bar" }); instance.on(evt, fn, ctx, arg1, ...argN); node.on(evt, fn, ctx, arg1, ...argN); YUICONF 2009Monday, January 17, 2011
  105. 105. on()++ instance.on("start", myObj.startHandler, myObj, 1, new Date(), { foo: "bar" }); instance.on(evt, fn, ctx, arg1, ...argN); node.on(evt, fn, ctx, arg1, ...argN); node.on(evt, fn, null, arg1, ...argN); YUICONF 2009Monday, January 17, 2011
  106. 106. Above and beyond ✓ Subscription context override ✓ Subscription payload - Easy event detach - "After" subscriptions - New DOM events YUICONF 2009Monday, January 17, 2011
  107. 107. Above and beyond ✓ Subscription context override ✓ Subscription payload - Easy event detach - "After" subscriptions - New DOM events YUICONF 2009Monday, January 17, 2011
  108. 108. Handles and categories button.detach("click", doSomething); YUICONF 2009Monday, January 17, 2011
  109. 109. Handles and categories button.detach("click", doSomething); var sub = button.on("click", doSomething); sub.detach(); YUICONF 2009Monday, January 17, 2011
  110. 110. Handles and categories button.detach("click", doSomething); var sub = button.on("click", doSomething); sub.detach(); button.on("my-cat|click", doSomething); button.detach("my-cat|click"); YUICONF 2009Monday, January 17, 2011
  111. 111. Handles and categories button.detach("click", doSomething); var sub = button.on("click", doSomething); sub.detach(); widget.on("guid|xChange", handleXChange); widget.on("guid|yChange", handleYChange); widget.detach("guid|*"); YUICONF 2009Monday, January 17, 2011
  112. 112. Above and beyond ✓ Subscription context override ✓ Subscription payload ✓ Easy event detach - "After" subscriptions - New DOM events YUICONF 2009Monday, January 17, 2011
  113. 113. Above and beyond ✓ Subscription context override ✓ Subscription payload ✓ Easy event detach - "After" subscriptions - New DOM events YUICONF 2009Monday, January 17, 2011
  114. 114. event instance.on(event,handler) _defEventFn instance YUICONF 2009Monday, January 17, 2011
  115. 115. event instance.on(event,handler) _defEventFn instance.after(event,handler) instance YUICONF 2009Monday, January 17, 2011
  116. 116. Y.Base ✓ Event API ✓ Attributes After moments ✓ Plugins this.after("attrChange", this._updateUI); YUICONF 2009Monday, January 17, 2011
  117. 117. Y.Base ✓ Event API ✓ Attributes After moments ✓ Plugins this.after("attrChange", this._updateUI); Side effects of a state change YUICONF 2009Monday, January 17, 2011
  118. 118. event instance.on(event,handler) _defEventFn instance.after(event,handler) instance YUICONF 2009Monday, January 17, 2011
  119. 119. State UNCHANGED event instance.on(event,handler) _defEventFn instance.after(event,handler) instance YUICONF 2009Monday, January 17, 2011
  120. 120. State UNCHANGED event instance.on(event,handler) Change state _defEventFn instance.after(event,handler) instance YUICONF 2009Monday, January 17, 2011
  121. 121. State UNCHANGED event instance.on(event,handler) Change state _defEventFn instance.after(event,handler) State CHANGED instance YUICONF 2009Monday, January 17, 2011
  122. 122. YUICONF 2009Monday, January 17, 2011
  123. 123. Above and beyond ✓ Subscription context override ✓ Subscription payload ✓ Easy event detach ✓ "After" subscriptions - New DOM events YUICONF 2009Monday, January 17, 2011
  124. 124. Above and beyond ✓ Subscription context override ✓ Subscription payload ✓ Easy event detach ✓ "After" subscriptions - New DOM events YUICONF 2009Monday, January 17, 2011
  125. 125. DOM++ Y.Env.evt.plugins.YOUR_EVENT = Y.Node.DOM_EVENTS.YOUR_EVENT = { on: function (type, handler, ctx) { } } YUICONF 2009Monday, January 17, 2011
  126. 126. DOM++ Y.Env.evt.plugins.YOUR_EVENT = Y.Node.DOM_EVENTS.YOUR_EVENT = { on: function (type, handler, ctx) { } } YUICONF 2009Monday, January 17, 2011
  127. 127. Konami Y.Env.evt.plugins.konami = Y.Node.DOM_EVENTS.konami = { } YUICONF 2009Monday, January 17, 2011
  128. 128. Konami Y.Env.evt.plugins.konami = Y.Node.DOM_EVENTS.konami = { on: function (type, fn, ctx) { var progress = {}, handlers = {}, keys = [38,38,40,40,37,39,37,39,66,65], ... node.on("keydown", _checkProgress); return detachHandle; } YUICONF 2009Monday, January 17, 2011
  129. 129. Using your event node.on(konami, addUnicorns); YUICONF 2009Monday, January 17, 2011
  130. 130. Above and beyond ✓ Subscription context override ✓ Subscription payload ✓ Easy event detach ✓ "After" subscriptions ✓ New DOM events YUICONF 2009Monday, January 17, 2011
  131. 131. Summary ✓ Unified subscription ✓ Default behaviors ✓ Bubbling Custom ✓ Context override DOM Events ✓ Subscription payload ✓ Easy event detach ✓ "After" subscriptions ✓ New DOM events YUICONF 2009Monday, January 17, 2011
  132. 132. Rethink how you use events YUICONF 2009Monday, January 17, 2011
  133. 133. Rethink how you build your apps YUICONF 2009Monday, January 17, 2011
  134. 134. Image credit http://www.redandgreen.org/R2Kphotos2.htm (revolution) http://www.vinylrecords.ch/B/BE/Beatles/ http://www.flickr.com/photos/farewell_goodnight/214712018/ http://www.flickr.com/photos/docman/2948845217/ http://www.flickr.com/photos/yabanji/3175297773/ http://www.flickr.com/photos/hueyatl/233553293/ http://www.flickr.com/photos/dark_hylian/56050955/ http://www.flickr.com/photos/techthis/3528776386/ YUICONF 2009Monday, January 17, 2011

×