Events Evolved with YUI

Events Evolved

Luke Smith
yuilibrary: lsmith
github: lsmith
twitter: @ls_n

YUICONF 2009

Monday, January 17, 2011

<input type="button" onclick="doSomething();">

YUICONF 2009



button.onclick = doSomething;

YUICONF 2009




button.addEventListener('click', doSomething, false);

YUICONF 2009


if (button.addEventListener) {
} else if (button.attachEvent) {
button.attachEvent('click', doSomething);
} else {
}

YUICONF 2009


if (button.addEventListener) {
} else if (button.attachEvent) {
button.attachEvent('click', doSomething);
} else {
}

DUMB

YUICONF 2009





if (button.addEventListener) { /* madness */ }

YUICONF 2009





if (button.addEventListener) { /* madness */ }

addEvent(button, 'click', doSomething);

YUICONF 2009


function doSomething(e) {
if (e && e.preventDefault) {
e.preventDefault();
}

return false;
}

YUICONF 2009


if (e && e.preventDefault) {
e.preventDefault();
}

return false;
}

We've been through this

YUICONF 2009


YUI 2

YAHOO.util.Event.on(button,'click',doSomething);

YUICONF 2009


YUI 2


YAHOO.util.Event.preventDefault(e);

YUICONF 2009


YUI 2



✓ Normalized subscription

YUICONF 2009


YUI 2



✓ Normalized event handling

YUICONF 2009


YUI 2



✓ DOM-like method names

YUICONF 2009


YUI 3

button.on('click', doSomething);

e.preventDefault();

YUICONF 2009


YUI 3


e.preventDefault();


YUICONF 2009


YUI 3


e.preventDefault();

✓ DOM-like context

YUICONF 2009


YUI 3


e.preventDefault();

✓ DOM-like context
✓ Terse
YUICONF 2009


We give you the DOM

YUICONF 2009


We give you the DOM
... but it works

YUICONF 2009


You are here

YUICONF 2009


Custom Events
YUI 2

YUICONF 2009


Custom Events
YUI 2

this.myEvent =
new YAHOO.util.CustomEvent("myEvent");

instance.myEvent.subscribe(doSomething);

this.myEvent.fire();

YUICONF 2009


Custom Events
YUI 2

instance.subscribe("myEvent",doSomething);

this.fireEvent("myEvent");

YUICONF 2009


Custom Events

YUI 3

instance.on("myEvent", doSomething);

this.fire("myEvent");

YUICONF 2009


Custom Events

YUI 3

this.publish("myEvent", config);


this.fire("myEvent");

YUICONF 2009


Y.extend( MyClass, Y.EventTarget );

Y.EventTarget

✓ Event API

YUICONF 2009


Y.extend( MyClass, Y.Base );

Y.EventTarget Y.Base

✓ Event API ✓ Event API
✓ Attributes
✓ Plugins

YUICONF 2009


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


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


Normalized subscription
✓ DOM events
button.on("click", doSomething);

✓ Custom events

YUICONF 2009


Unified subscription
✓ DOM events
button.on("click", doSomething);

✓ Custom events

YUICONF 2009


Your App

Event API
DOM Events Module/App Events

YUICONF 2009


Custom
DOM
Events

YUICONF 2009


Custom Events more DOM like

✓ Unify Subscription API
- Default behaviors
- Bubbling

YUICONF 2009



✓ Unify Subscription API foo.on(event, fn)

- Default behaviors
- Bubbling

YUICONF 2009



- Default behaviors
this.publish(...)
- Bubbling

YUICONF 2009



Default behaviors

YUICONF 2009


Custom Events

YUI 3

this.publish("myEvent", config);

YUICONF 2009


Default behaviors
this.publish( name, config );

initializer: function () {

this.publish("start", {

defaultFn: this._defStartFn

});

}

YUICONF 2009


Default behaviors
initializer: function () { ... },

_defStartFn: function (e) {

Y.log("started " + e.time);

this._disableControls();

this._getGoing(e.urgency);
}

YUICONF 2009


Event payload
e.time
e.urgency

this.fire("start", payload);

YUICONF 2009


Event payload
e.time
e.urgency

this.fire("start", {
time: new Date(),
urgency: 'ASAP'
});

YUICONF 2009


instance.on("start", doSomething);

this.fire("start");

YUICONF 2009


instance.on("start", doSomething);

this.fire("start"); execute subscribers

end yes prevented?

_defStartFn no
YUICONF 2009


prevented? Behavior is preventable

if (e.urgency === 'ASAP') {
e.preventDefault();
}
}

YUICONF 2009


... but it doesn't have to be


defaultFn: this._defStartFn,

preventable: false

});

}

YUICONF 2009


... but it doesn't have to be


defaultFn: this._defStartFn,

preventedFn: this._prvStartFn

});

}

YUICONF 2009


YUICONF 2009


Dogfood (nom)
cache.js
this.publish("add", {
defaultFn: this._defAddFn
});

this.publish("flush", {
defaultFn: this._defFlushFn
});
}

YUICONF 2009


Dogfood (nom)
console.js
this.publish(ENTRY, {
defaultFn: this._defEntryFn
});

this.publish(RESET, {
defaultFn: this._defResetFn
});
}

YUICONF 2009


Dogfood (nom)
datasource.js
this.publish("request", {
defaultFn: Y.bind("_defRequestFn",
this),
queuable:true
});
...
}

YUICONF 2009


Dogfood (nom)
drag.js
this.publish(EV_MOUSE_DOWN, {
defaultFn: this._defMouseDownFn,
bubbles: true
});
...
}

YUICONF 2009


Dogfood (nom)
slider.js
this.publish(SYNC, {
defaultFn: this._defSyncFn
});
this.publish(POSITION_THUMB, {
defaultFn: this._defPositionThumbFn
});
}

YUICONF 2009


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


We love default behaviors

You should, too

YUICONF 2009



✓ Default behaviors
- Bubbling

YUICONF 2009



Bubbling

YUICONF 2009


Bubbling


bubbles: true

});

this.addTarget(host);

}

YUICONF 2009


Bubbling


broadcast: 1

});

}

YUICONF 2009


Bubbling


bubbles: true,

stoppedFn: this._stopStartFn

});

}

YUICONF 2009


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


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


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


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


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


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


Event Delegation

instance1 instance1.on('start', sayHi);


YUICONF 2009


Event Delegation
6 subscriptions


YUICONF 2009


Event Delegation
ManagerClass Mgr.on('foo:start', sayHi);
instance1
instance2
instance3
instance4
instance5
instance6

YUICONF 2009


Event Delegation
instance1
instance2 1 subscription
instance3
instance4
instance5
instance6

YUICONF 2009


Event Delegation
instance1
instance2 1 subscription
instance3
instance4 initializer: function () {
this.addTarget(
instance5 this.get("host");
);
instance6 }

YUICONF 2009


Dogfood
Drag and Drop
var draggable = new Y.DD.Drag({
node: '#dragme'
});

draggable.on('start', doSomething);

YUICONF 2009


Dogfood
Drag and Drop
var draggable = new Y.DD.Drag({
node: '#dragme'
});

Y.DD.DDM.on('drag:start', doSomething);

YUICONF 2009


Dogfood
Y.Global
Y.on('yui:log', doSomething);

Y.Global.on('yui:log', doSomething);

YUICONF 2009



✓ Bubbling

YUICONF 2009


Above and beyond

YUICONF 2009


Above and beyond

- Subscription context override

YUICONF 2009


Above and beyond

- Subscription payload

YUICONF 2009


Above and beyond

- Easy event detach

YUICONF 2009


Above and beyond

- Easy event detach
- "After" subscriptions

YUICONF 2009


Above and beyond

- Easy event detach
- New DOM events

YUICONF 2009


on()++
instance.on("start", myObj.startHandler);

YUICONF 2009


on()++
instance.on("start",
Y.bind(myObj.startHandler, myObj));

YUICONF 2009


on()++
myObj.startHandler, myObj);

instance.on(event, handler, context);

YUICONF 2009


on()++
node.on("click",
myObj.clickHandler, myObj);

instance.on(event, handler, context);
node.on(event, handler, context);

YUICONF 2009


on()++
Y.rbind(myObj.startHandler, myObj,
1, new Date(), { foo: "bar" }));

YUICONF 2009


on()++
myObj.startHandler, myObj,
1, new Date(), { foo: "bar" });

instance.on(evt, fn, ctx, arg1, ...argN);
node.on(evt, fn, ctx, arg1, ...argN);

YUICONF 2009


on()++
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


Above and beyond

✓ Subscription context override
✓ Subscription payload
- Easy event detach
- New DOM events

YUICONF 2009


Handles and categories
button.detach("click", doSomething);

YUICONF 2009



var sub = button.on("click", doSomething);
sub.detach();

YUICONF 2009



sub.detach();

button.on("my-cat|click", doSomething);
button.detach("my-cat|click");

YUICONF 2009



sub.detach();

widget.on("guid|xChange", handleXChange);
widget.on("guid|yChange", handleYChange);
widget.detach("guid|*");

YUICONF 2009


Above and beyond

✓ Easy event detach
- New DOM events

YUICONF 2009


event instance.on(event,handler)

_defEventFn

instance

YUICONF 2009



_defEventFn

instance.after(event,handler)

instance

YUICONF 2009


Y.Base

✓ Event API
✓ Attributes After moments
✓ Plugins

this.after("attrChange", this._updateUI);

YUICONF 2009


Y.Base

✓ Event API
✓ Attributes After moments
✓ Plugins

this.after("attrChange", this._updateUI);

Side effects of a state change

YUICONF 2009


State UNCHANGED

_defEventFn


instance

YUICONF 2009


State UNCHANGED

Change state _defEventFn


instance

YUICONF 2009


State UNCHANGED

Change state _defEventFn


State CHANGED
instance

YUICONF 2009


Above and beyond

✓ "After" subscriptions
- New DOM events

YUICONF 2009


DOM++
Y.Env.evt.plugins.YOUR_EVENT =
Y.Node.DOM_EVENTS.YOUR_EVENT = {

on: function (type, handler, ctx) {

}

}
YUICONF 2009


Konami
Y.Env.evt.plugins.konami =
Y.Node.DOM_EVENTS.konami = {

}
YUICONF 2009


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


Using your event

node.on('konami', addUnicorns);

YUICONF 2009


Above and beyond

✓ New DOM events

YUICONF 2009


Summary
✓ Unified subscription
✓ Bubbling
Custom ✓ Context override
DOM
Events ✓ Subscription payload
✓ New DOM events

YUICONF 2009


Rethink how you use events

YUICONF 2009


Rethink how you build your apps

YUICONF 2009


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


Events Evolved with YUI

Recommended

Recommended

More Related Content

Recently uploaded

Recently uploaded (20)

Featured

Featured (20)

Events Evolved with YUI