SlideShare a Scribd company logo

YUI 3: Events Evolved

Luke Smith, profile picture
Luke Smith

The document discusses the evolution of event handling in JavaScript libraries like YUI. It shows how early approaches involved multiple ways of attaching event handlers and a lack of normalization. YUI 2 introduced a normalized subscription model but event handling was not fully normalized. YUI 3 further improved on this with a fully normalized subscription and event handling model using DOM-like syntax and contexts. It also discusses how YUI 3 extended this model to custom events, introducing features like default behaviors, payloads and control over bubbling to make custom events behave more like DOM events.

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

More Related Content

PDF
Debugging tips in YUI 3
Luke Smith
 
KEY
Creating custom modules using YUI3
Gonzalo Cordero
 
PDF
Introduction to YUI3 - Palouse Code Camp 2010
Jeff Craig
 
PDF
Introduction to YUI
Christian Heilmann
 
PDF
Hack U - YUI - 2012 IIT Kharagpur
Sumana Hariharan
 
PPT
Yahoo! Frontend Building Blocks
Subramanyan Murali
 
PDF
YUI introduction to build hack interfaces
Christian Heilmann
 
PPT
Yuihacku iitd-sumana
Sumana Hariharan
 
Debugging tips in YUI 3
Luke Smith
 
Creating custom modules using YUI3
Gonzalo Cordero
 
Introduction to YUI3 - Palouse Code Camp 2010
Jeff Craig
 
Introduction to YUI
Christian Heilmann
 
Hack U - YUI - 2012 IIT Kharagpur
Sumana Hariharan
 
Yahoo! Frontend Building Blocks
Subramanyan Murali
 
YUI introduction to build hack interfaces
Christian Heilmann
 
Yuihacku iitd-sumana
Sumana Hariharan
 

Similar to YUI 3: Events Evolved (20)

PDF
JavaScript From Scratch: Events
Michael Girouard
 
PDF
Build your web apps with yql and yui
ISOCHK
 
PPTX
Leveraging jQuery's Special Events API (JSConf 2012)
James Greene
 
PPTX
YUI for your Hacks
Subramanyan Murali
 
PPT
Geekup Leeds - Why the YUI?
Christian Heilmann
 
PDF
Dojo (QCon 2007 Slides)
Eugene Lazutkin
 
PDF
Building Real-World Dojo Web Applications
Andrew Ferrier
 
PPT
YUI The Elephant In The Room
Christian Heilmann
 
PPT
YUI open for all !
Subramanyan Murali
 
ZIP
YUI 3
Dav Glass
 
PPTX
User Interface Patterns and Nuxeo
anicewick
 
PDF
JavaScript Library Overview (Ajax Exp West 2007)
jeresig
 
PDF
yui3 is Sexy - 使用 YUI 3 的 Sexy Part !
Joseph Chiang
 
PDF
Tipi - Building Rich User Interfaces
Briggs & Walker
 
PDF
Yui- Yahoo! User Interface Library
Momentum Design Lab
 
PDF
YUI - HackU 2010 IIT Mumbai
knutties
 
PPTX
Y hack-china-2013
Syu-jhih Wu
 
PPTX
01 Introduction - JavaScript Development
Tommy Vercety
 
PDF
dojo.things()
Peter Higgins
 
KEY
Refresh Events Prototype
guest57abea
 
JavaScript From Scratch: Events
Michael Girouard
 
Build your web apps with yql and yui
ISOCHK
 
Leveraging jQuery's Special Events API (JSConf 2012)
James Greene
 
YUI for your Hacks
Subramanyan Murali
 
Geekup Leeds - Why the YUI?
Christian Heilmann
 
Dojo (QCon 2007 Slides)
Eugene Lazutkin
 
Building Real-World Dojo Web Applications
Andrew Ferrier
 
YUI The Elephant In The Room
Christian Heilmann
 
YUI open for all !
Subramanyan Murali
 
YUI 3
Dav Glass
 
User Interface Patterns and Nuxeo
anicewick
 
JavaScript Library Overview (Ajax Exp West 2007)
jeresig
 
yui3 is Sexy - 使用 YUI 3 的 Sexy Part !
Joseph Chiang
 
Tipi - Building Rich User Interfaces
Briggs & Walker
 
Yui- Yahoo! User Interface Library
Momentum Design Lab
 
YUI - HackU 2010 IIT Mumbai
knutties
 
Y hack-china-2013
Syu-jhih Wu
 
01 Introduction - JavaScript Development
Tommy Vercety
 
dojo.things()
Peter Higgins
 
Refresh Events Prototype
guest57abea
 
Ad

More from Luke Smith (8)

PDF
Promises. The basics, from Promises/A+
Luke Smith
 
KEY
Attribute
Luke Smith
 
KEY
Inheritance patterns
Luke Smith
 
PPTX
Hack with YUI
Luke Smith
 
PDF
YUI 3 quick overview
Luke Smith
 
PDF
YUI 3: Below the Surface
Luke Smith
 
KEY
Yui3
Luke Smith
 
KEY
Front end engineering, YUI Gallery, and your future
Luke Smith
 
Promises. The basics, from Promises/A+
Luke Smith
 
Attribute
Luke Smith
 
Inheritance patterns
Luke Smith
 
Hack with YUI
Luke Smith
 
YUI 3 quick overview
Luke Smith
 
YUI 3: Below the Surface
Luke Smith
 
Yui3
Luke Smith
 
Front end engineering, YUI Gallery, and your future
Luke Smith
 
Ad

Recently uploaded (20)

PDF
Mobile App Security Testing_ A Comprehensive Guide.pdf
flufftailshop
 
PDF
KodekX | Application Modernization Development
KodekX
 
PDF
NewMind AI Weekly Chronicles - August'25 Week I
NewMind AI
 
PDF
MIND Revenue Release Quarter 2 2025 Press Release
MIND CTI
 
PPTX
Spectroscopy.pptx food analysis technology
nawahassan45
 
PDF
Optimiser vos workloads AI/ML sur Amazon EC2 et AWS Graviton
Julien SIMON
 
PDF
Chapter 3 Spatial Domain Image Processing.pdf
Getnet Tigabie Askale -(GM)
 
PDF
Per capita expenditure prediction using model stacking based on satellite ima...
IAESIJAI
 
PDF
Approach and Philosophy of On baking technology
30anthuong17
 
PPT
“AI and Expert System Decision Support & Business Intelligence Systems”
ZubinRadhakrishnan
 
PDF
Profit Center Accounting in SAP S/4HANA, S4F28 Col11
Libreria ERP
 
PDF
The Rise and Fall of 3GPP – Time for a Sabbatical?
3G4G
 
PDF
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
Jian-Hong Pan
 
PDF
Encapsulation_ Review paper, used for researhc scholars
gurumoop
 
PPTX
Understanding_Digital_Forensics_Presentation.pptx
ImranKhan423233
 
PPTX
Detection-First SIEM: Rule Types, Dashboards, and Threat-Informed Strategy
ReZa AdineH
 
PDF
Machine learning based COVID-19 study performance prediction
IAESIJAI
 
PDF
Reach Out and Touch Someone: Haptics and Empathic Computing
Mark Billinghurst
 
PPTX
MYSQL Presentation for SQL database connectivity
Swati270511
 
PDF
Agricultural_Statistics_at_a_Glance_2022_0.pdf
SandeepSingh286037
 
Mobile App Security Testing_ A Comprehensive Guide.pdf
flufftailshop
 
KodekX | Application Modernization Development
KodekX
 
NewMind AI Weekly Chronicles - August'25 Week I
NewMind AI
 
MIND Revenue Release Quarter 2 2025 Press Release
MIND CTI
 
Spectroscopy.pptx food analysis technology
nawahassan45
 
Optimiser vos workloads AI/ML sur Amazon EC2 et AWS Graviton
Julien SIMON
 
Chapter 3 Spatial Domain Image Processing.pdf
Getnet Tigabie Askale -(GM)
 
Per capita expenditure prediction using model stacking based on satellite ima...
IAESIJAI
 
Approach and Philosophy of On baking technology
30anthuong17
 
“AI and Expert System Decision Support & Business Intelligence Systems”
ZubinRadhakrishnan
 
Profit Center Accounting in SAP S/4HANA, S4F28 Col11
Libreria ERP
 
The Rise and Fall of 3GPP – Time for a Sabbatical?
3G4G
 
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
Jian-Hong Pan
 
Encapsulation_ Review paper, used for researhc scholars
gurumoop
 
Understanding_Digital_Forensics_Presentation.pptx
ImranKhan423233
 
Detection-First SIEM: Rule Types, Dashboards, and Threat-Informed Strategy
ReZa AdineH
 
Machine learning based COVID-19 study performance prediction
IAESIJAI
 
Reach Out and Touch Someone: Haptics and Empathic Computing
Mark Billinghurst
 
MYSQL Presentation for SQL database connectivity
Swati270511
 
Agricultural_Statistics_at_a_Glance_2022_0.pdf
SandeepSingh286037
 

YUI 3: Events Evolved

  • 1. Events Evolved Luke Smith yuilibrary: lsmith github: lsmith twitter: @ls_n YUICONF 2009 Monday, January 17, 2011
  • 2. <input type="button" onclick="doSomething();"> YUICONF 2009 Monday, January 17, 2011
  • 3. <input type="button" onclick="doSomething();"> YUICONF 2009 Monday, January 17, 2011
  • 4. <input type="button" onclick="doSomething();"> button.onclick = doSomething; YUICONF 2009 Monday, January 17, 2011
  • 5. <input type="button" onclick="doSomething();"> button.onclick = doSomething; YUICONF 2009 Monday, January 17, 2011
  • 6. <input type="button" onclick="doSomething();"> button.onclick = doSomething; button.addEventListener('click', doSomething, false); YUICONF 2009 Monday, January 17, 2011
  • 7. <input type="button" onclick="doSomething();"> button.onclick = doSomething; button.addEventListener('click', doSomething, false); YUICONF 2009 Monday, January 17, 2011
  • 8. <input type="button" onclick="doSomething();"> button.onclick = doSomething; button.addEventListener('click', doSomething, false); YUICONF 2009 Monday, January 17, 2011
  • 9. if (button.addEventListener) { button.addEventListener('click', doSomething, false); } else if (button.attachEvent) { button.attachEvent('click', doSomething); } else { button.onclick = doSomething; } YUICONF 2009 Monday, January 17, 2011
  • 10. if (button.addEventListener) { button.addEventListener('click', doSomething, false); } else if (button.attachEvent) { button.attachEvent('click', doSomething); } else { button.onclick = doSomething; } DUMB YUICONF 2009 Monday, January 17, 2011
  • 11. <input type="button" onclick="doSomething();"> button.onclick = doSomething; button.addEventListener('click', doSomething, false); if (button.addEventListener) { /* madness */ } YUICONF 2009 Monday, January 17, 2011
  • 12. <input type="button" onclick="doSomething();"> button.onclick = doSomething; button.addEventListener('click', doSomething, false); if (button.addEventListener) { /* madness */ } addEvent(button, 'click', doSomething); YUICONF 2009 Monday, January 17, 2011
  • 13. function doSomething(e) { if (e && e.preventDefault) { e.preventDefault(); } return false; } YUICONF 2009 Monday, January 17, 2011
  • 14. function doSomething(e) { if (e && e.preventDefault) { e.preventDefault(); } return false; } YUICONF 2009 Monday, January 17, 2011
  • 15. function doSomething(e) { if (e && e.preventDefault) { e.preventDefault(); } return false; } We've been through this YUICONF 2009 Monday, January 17, 2011
  • 16. <input type="button" onclick="doSomething();"> button.onclick = doSomething; button.addEventListener('click', doSomething, false); if (button.addEventListener) { /* madness */ } addEvent(button, 'click', doSomething); YUICONF 2009 Monday, January 17, 2011
  • 17. <input type="button" onclick="doSomething();"> button.onclick = doSomething; button.addEventListener('click', doSomething, false); if (button.addEventListener) { /* madness */ } addEvent(button, 'click', doSomething); YUICONF 2009 Monday, January 17, 2011
  • 18. YUI 2 YAHOO.util.Event.on(button,'click',doSomething); YUICONF 2009 Monday, January 17, 2011
  • 19. YUI 2 YAHOO.util.Event.on(button,'click',doSomething); YAHOO.util.Event.preventDefault(e); YUICONF 2009 Monday, January 17, 2011
  • 20. YUI 2 YAHOO.util.Event.on(button,'click',doSomething); YAHOO.util.Event.preventDefault(e); ✓ Normalized subscription YUICONF 2009 Monday, January 17, 2011
  • 21. YUI 2 YAHOO.util.Event.on(button,'click',doSomething); YAHOO.util.Event.preventDefault(e); ✓ Normalized subscription ✓ Normalized event handling YUICONF 2009 Monday, January 17, 2011
  • 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 2009 Monday, January 17, 2011
  • 23. YUI 3 button.on('click', doSomething); e.preventDefault(); YUICONF 2009 Monday, January 17, 2011
  • 24. YUI 3 button.on('click', doSomething); e.preventDefault(); ✓ Normalized subscription YUICONF 2009 Monday, January 17, 2011
  • 25. YUI 3 button.on('click', doSomething); e.preventDefault(); ✓ Normalized subscription ✓ Normalized event handling YUICONF 2009 Monday, January 17, 2011
  • 26. YUI 3 button.on('click', doSomething); e.preventDefault(); ✓ Normalized subscription ✓ Normalized event handling ✓ DOM-like method names YUICONF 2009 Monday, January 17, 2011
  • 27. YUI 3 button.on('click', doSomething); e.preventDefault(); ✓ Normalized subscription ✓ Normalized event handling ✓ DOM-like method names ✓ DOM-like context YUICONF 2009 Monday, January 17, 2011
  • 28. YUI 3 button.on('click', doSomething); e.preventDefault(); ✓ Normalized subscription ✓ Normalized event handling ✓ DOM-like method names ✓ DOM-like context ✓ Terse YUICONF 2009 Monday, January 17, 2011
  • 29. We give you the DOM YUICONF 2009 Monday, January 17, 2011
  • 30. We give you the DOM ... but it works YUICONF 2009 Monday, January 17, 2011
  • 31. You are here YUICONF 2009 Monday, January 17, 2011
  • 32. Custom Events YUI 2 YUICONF 2009 Monday, January 17, 2011
  • 33. Custom Events YUI 2 this.myEvent = new YAHOO.util.CustomEvent("myEvent"); instance.myEvent.subscribe(doSomething); this.myEvent.fire(); YUICONF 2009 Monday, January 17, 2011
  • 34. Custom Events YUI 2 instance.subscribe("myEvent",doSomething); this.fireEvent("myEvent"); YUICONF 2009 Monday, January 17, 2011
  • 35. Custom Events YUI 3 instance.on("myEvent", doSomething); this.fire("myEvent"); YUICONF 2009 Monday, January 17, 2011
  • 36. Custom Events YUI 3 this.publish("myEvent", config); instance.on("myEvent", doSomething); this.fire("myEvent"); YUICONF 2009 Monday, January 17, 2011
  • 37. Y.extend( MyClass, Y.EventTarget ); Y.EventTarget ✓ Event API YUICONF 2009 Monday, January 17, 2011
  • 38. Y.extend( MyClass, Y.Base ); Y.EventTarget Y.Base ✓ Event API ✓ Event API ✓ Attributes ✓ Plugins YUICONF 2009 Monday, January 17, 2011
  • 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 2009 Monday, January 17, 2011
  • 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 2009 Monday, January 17, 2011
  • 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 2009 Monday, January 17, 2011
  • 42. Normalized subscription ✓ DOM events button.on("click", doSomething); ✓ Custom events instance.on("myEvent", doSomething); YUICONF 2009 Monday, January 17, 2011
  • 43. Unified subscription ✓ DOM events button.on("click", doSomething); ✓ Custom events instance.on("myEvent", doSomething); YUICONF 2009 Monday, January 17, 2011
  • 44. Your App Event API DOM Events Module/App Events YUICONF 2009 Monday, January 17, 2011
  • 45. Custom DOM Events YUICONF 2009 Monday, January 17, 2011
  • 46. Custom DOM Events YUICONF 2009 Monday, January 17, 2011
  • 47. Custom Events more DOM like ✓ Unify Subscription API - Default behaviors - Bubbling YUICONF 2009 Monday, January 17, 2011
  • 48. Custom Events more DOM like ✓ Unify Subscription API foo.on(event, fn) - Default behaviors - Bubbling YUICONF 2009 Monday, January 17, 2011
  • 49. Custom Events more DOM like ✓ Unify Subscription API - Default behaviors this.publish(...) - Bubbling YUICONF 2009 Monday, January 17, 2011
  • 50. Custom Events more DOM like Default behaviors YUICONF 2009 Monday, January 17, 2011
  • 51. Custom Events YUI 3 this.publish("myEvent", config); instance.on("myEvent", doSomething); this.fire("myEvent"); YUICONF 2009 Monday, January 17, 2011
  • 52. Custom Events YUI 3 this.publish("myEvent", config); YUICONF 2009 Monday, January 17, 2011
  • 53. Default behaviors this.publish( name, config ); initializer: function () { this.publish("start", { defaultFn: this._defStartFn }); } YUICONF 2009 Monday, January 17, 2011
  • 54. Default behaviors this.publish( name, config ); initializer: function () { this.publish("start", { defaultFn: this._defStartFn }); } YUICONF 2009 Monday, January 17, 2011
  • 55. Default behaviors initializer: function () { ... }, _defStartFn: function (e) { Y.log("started " + e.time); this._disableControls(); this._getGoing(e.urgency); } YUICONF 2009 Monday, January 17, 2011
  • 56. Event payload e.time e.urgency this.fire("start", payload); YUICONF 2009 Monday, January 17, 2011
  • 57. Event payload e.time e.urgency this.fire("start", { time: new Date(), urgency: 'ASAP' }); YUICONF 2009 Monday, January 17, 2011
  • 58. instance.on("start", doSomething); this.fire("start"); YUICONF 2009 Monday, January 17, 2011
  • 59. instance.on("start", doSomething); this.fire("start"); execute subscribers end yes prevented? _defStartFn no YUICONF 2009 Monday, January 17, 2011
  • 60. prevented? Behavior is preventable function doSomething(e) { if (e.urgency === 'ASAP') { e.preventDefault(); } } YUICONF 2009 Monday, January 17, 2011
  • 61. ... but it doesn't have to be initializer: function () { this.publish("start", { defaultFn: this._defStartFn, preventable: false }); } YUICONF 2009 Monday, January 17, 2011
  • 62. ... but it doesn't have to be initializer: function () { this.publish("start", { defaultFn: this._defStartFn, preventedFn: this._prvStartFn }); } YUICONF 2009 Monday, January 17, 2011
  • 64. Dogfood (nom) cache.js initializer: function () { this.publish("add", { defaultFn: this._defAddFn }); this.publish("flush", { defaultFn: this._defFlushFn }); } YUICONF 2009 Monday, January 17, 2011
  • 65. Dogfood (nom) console.js initializer: function () { this.publish(ENTRY, { defaultFn: this._defEntryFn }); this.publish(RESET, { defaultFn: this._defResetFn }); } YUICONF 2009 Monday, January 17, 2011
  • 66. Dogfood (nom) datasource.js initializer: function () { this.publish("request", { defaultFn: Y.bind("_defRequestFn", this), queuable:true }); ... } YUICONF 2009 Monday, January 17, 2011
  • 67. Dogfood (nom) drag.js initializer: function () { this.publish(EV_MOUSE_DOWN, { defaultFn: this._defMouseDownFn, bubbles: true }); ... } YUICONF 2009 Monday, January 17, 2011
  • 68. Dogfood (nom) slider.js initializer: function () { this.publish(SYNC, { defaultFn: this._defSyncFn }); this.publish(POSITION_THUMB, { defaultFn: this._defPositionThumbFn }); } YUICONF 2009 Monday, January 17, 2011
  • 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 2009 Monday, January 17, 2011
  • 70. We love default behaviors You should, too YUICONF 2009 Monday, January 17, 2011
  • 71. Custom Events more DOM like ✓ Unify Subscription API ✓ Default behaviors - Bubbling YUICONF 2009 Monday, January 17, 2011
  • 72. Custom Events more DOM like Bubbling YUICONF 2009 Monday, January 17, 2011
  • 73. Bubbling initializer: function () { this.publish("start", { bubbles: true }); this.addTarget(host); } YUICONF 2009 Monday, January 17, 2011
  • 74. Bubbling initializer: function () { this.publish("start", { broadcast: 1 }); } YUICONF 2009 Monday, January 17, 2011
  • 75. Bubbling initializer: function () { this.publish("start", { bubbles: true, stoppedFn: this._stopStartFn }); } YUICONF 2009 Monday, January 17, 2011
  • 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 2009 Monday, January 17, 2011
  • 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 2009 Monday, January 17, 2011
  • 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 2009 Monday, January 17, 2011
  • 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 2009 Monday, January 17, 2011
  • 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 2009 Monday, January 17, 2011
  • 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 2009 Monday, January 17, 2011
  • 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 2009 Monday, January 17, 2011
  • 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 2009 Monday, January 17, 2011
  • 84. Event Delegation ManagerClass Mgr.on('foo:start', sayHi); instance1 instance2 instance3 instance4 instance5 instance6 YUICONF 2009 Monday, January 17, 2011
  • 85. Event Delegation ManagerClass Mgr.on('foo:start', sayHi); instance1 instance2 1 subscription instance3 instance4 instance5 instance6 YUICONF 2009 Monday, January 17, 2011
  • 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 2009 Monday, January 17, 2011
  • 87. Dogfood Drag and Drop var draggable = new Y.DD.Drag({ node: '#dragme' }); draggable.on('start', doSomething); YUICONF 2009 Monday, January 17, 2011
  • 88. Dogfood Drag and Drop var draggable = new Y.DD.Drag({ node: '#dragme' }); Y.DD.DDM.on('drag:start', doSomething); YUICONF 2009 Monday, January 17, 2011
  • 89. Dogfood Y.Global Y.on('yui:log', doSomething); Y.Global.on('yui:log', doSomething); YUICONF 2009 Monday, January 17, 2011
  • 90. Custom Events more DOM like ✓ Unify Subscription API ✓ Default behaviors ✓ Bubbling YUICONF 2009 Monday, January 17, 2011
  • 91. Custom DOM Events YUICONF 2009 Monday, January 17, 2011
  • 92. Above and beyond YUICONF 2009 Monday, January 17, 2011
  • 93. Above and beyond - Subscription context override YUICONF 2009 Monday, January 17, 2011
  • 94. Above and beyond - Subscription context override - Subscription payload YUICONF 2009 Monday, January 17, 2011
  • 95. Above and beyond - Subscription context override - Subscription payload - Easy event detach YUICONF 2009 Monday, January 17, 2011
  • 96. Above and beyond - Subscription context override - Subscription payload - Easy event detach - "After" subscriptions YUICONF 2009 Monday, January 17, 2011
  • 97. Above and beyond - Subscription context override - Subscription payload - Easy event detach - "After" subscriptions - New DOM events YUICONF 2009 Monday, January 17, 2011
  • 98. on()++ instance.on("start", myObj.startHandler); YUICONF 2009 Monday, January 17, 2011
  • 99. on()++ instance.on("start", Y.bind(myObj.startHandler, myObj)); YUICONF 2009 Monday, January 17, 2011
  • 100. on()++ instance.on("start", myObj.startHandler, myObj); instance.on(event, handler, context); YUICONF 2009 Monday, January 17, 2011
  • 101. on()++ node.on("click", myObj.clickHandler, myObj); instance.on(event, handler, context); node.on(event, handler, context); YUICONF 2009 Monday, January 17, 2011
  • 102. on()++ instance.on("start", myObj.startHandler); YUICONF 2009 Monday, January 17, 2011
  • 103. on()++ instance.on("start", Y.rbind(myObj.startHandler, myObj, 1, new Date(), { foo: "bar" })); YUICONF 2009 Monday, January 17, 2011
  • 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 2009 Monday, January 17, 2011
  • 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 2009 Monday, January 17, 2011
  • 106. Above and beyond ✓ Subscription context override ✓ Subscription payload - Easy event detach - "After" subscriptions - New DOM events YUICONF 2009 Monday, January 17, 2011
  • 107. Above and beyond ✓ Subscription context override ✓ Subscription payload - Easy event detach - "After" subscriptions - New DOM events YUICONF 2009 Monday, January 17, 2011
  • 108. Handles and categories button.detach("click", doSomething); YUICONF 2009 Monday, January 17, 2011
  • 109. Handles and categories button.detach("click", doSomething); var sub = button.on("click", doSomething); sub.detach(); YUICONF 2009 Monday, January 17, 2011
  • 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 2009 Monday, January 17, 2011
  • 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 2009 Monday, January 17, 2011
  • 112. Above and beyond ✓ Subscription context override ✓ Subscription payload ✓ Easy event detach - "After" subscriptions - New DOM events YUICONF 2009 Monday, January 17, 2011
  • 113. Above and beyond ✓ Subscription context override ✓ Subscription payload ✓ Easy event detach - "After" subscriptions - New DOM events YUICONF 2009 Monday, January 17, 2011
  • 114. event instance.on(event,handler) _defEventFn instance YUICONF 2009 Monday, January 17, 2011
  • 115. event instance.on(event,handler) _defEventFn instance.after(event,handler) instance YUICONF 2009 Monday, January 17, 2011
  • 116. Y.Base ✓ Event API ✓ Attributes After moments ✓ Plugins this.after("attrChange", this._updateUI); YUICONF 2009 Monday, January 17, 2011
  • 117. Y.Base ✓ Event API ✓ Attributes After moments ✓ Plugins this.after("attrChange", this._updateUI); Side effects of a state change YUICONF 2009 Monday, January 17, 2011
  • 118. event instance.on(event,handler) _defEventFn instance.after(event,handler) instance YUICONF 2009 Monday, January 17, 2011
  • 119. State UNCHANGED event instance.on(event,handler) _defEventFn instance.after(event,handler) instance YUICONF 2009 Monday, January 17, 2011
  • 120. State UNCHANGED event instance.on(event,handler) Change state _defEventFn instance.after(event,handler) instance YUICONF 2009 Monday, January 17, 2011
  • 121. State UNCHANGED event instance.on(event,handler) Change state _defEventFn instance.after(event,handler) State CHANGED instance YUICONF 2009 Monday, January 17, 2011
  • 123. Above and beyond ✓ Subscription context override ✓ Subscription payload ✓ Easy event detach ✓ "After" subscriptions - New DOM events YUICONF 2009 Monday, January 17, 2011
  • 124. Above and beyond ✓ Subscription context override ✓ Subscription payload ✓ Easy event detach ✓ "After" subscriptions - New DOM events YUICONF 2009 Monday, January 17, 2011
  • 125. DOM++ Y.Env.evt.plugins.YOUR_EVENT = Y.Node.DOM_EVENTS.YOUR_EVENT = { on: function (type, handler, ctx) { } } YUICONF 2009 Monday, January 17, 2011
  • 126. DOM++ Y.Env.evt.plugins.YOUR_EVENT = Y.Node.DOM_EVENTS.YOUR_EVENT = { on: function (type, handler, ctx) { } } YUICONF 2009 Monday, January 17, 2011
  • 127. Konami Y.Env.evt.plugins.konami = Y.Node.DOM_EVENTS.konami = { } YUICONF 2009 Monday, January 17, 2011
  • 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 2009 Monday, January 17, 2011
  • 129. Using your event node.on('konami', addUnicorns); YUICONF 2009 Monday, January 17, 2011
  • 130. Above and beyond ✓ Subscription context override ✓ Subscription payload ✓ Easy event detach ✓ "After" subscriptions ✓ New DOM events YUICONF 2009 Monday, January 17, 2011
  • 131. Summary ✓ Unified subscription ✓ Default behaviors ✓ Bubbling Custom ✓ Context override DOM Events ✓ Subscription payload ✓ Easy event detach ✓ "After" subscriptions ✓ New DOM events YUICONF 2009 Monday, January 17, 2011
  • 132. Rethink how you use events YUICONF 2009 Monday, January 17, 2011
  • 133. Rethink how you build your apps YUICONF 2009 Monday, January 17, 2011
  • 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 2009 Monday, January 17, 2011