yui 3: events evolved

YUICONF 2009

yuilibrary: lsmith

github: lsmith

twitter: @ls_n

Luke Smith

Events Evolved

Monday, January 17, 2011

YUICONF 2009

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


YUICONF 2009


button.onclick = doSomething;


YUICONF 2009




YUICONF 2009



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


YUICONF 2009





YUICONF 2009

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


YUICONF 2009

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

DUMB


YUICONF 2009




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


YUICONF 2009





addEvent(button, 'click', doSomething);


YUICONF 2009

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

return false;}


YUICONF 2009

We've been through this

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

return false;}


YUICONF 2009





addEvent(button, 'click', doSomething);


YUICONF 2009

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

YUI 2


YUICONF 2009


YAHOO.util.Event.preventDefault(e);

YUI 2


YUICONF 2009



YUI 2

✓Normalized subscription


YUICONF 2009



YUI 2

✓Normalized subscription✓Normalized event handling


YUICONF 2009



YUI 2

✓Normalized subscription✓Normalized event handling✓DOM-like method names


YUICONF 2009

button.on('click', doSomething);

e.preventDefault();

YUI 3


YUICONF 2009


e.preventDefault();

YUI 3

✓Normalized subscription


YUICONF 2009


e.preventDefault();

YUI 3

✓Normalized subscription✓Normalized event handling


YUICONF 2009


e.preventDefault();

YUI 3

✓Normalized subscription✓Normalized event handling✓DOM-like method names


YUICONF 2009


e.preventDefault();

YUI 3

✓Normalized subscription✓Normalized event handling✓DOM-like method names✓DOM-like context


YUICONF 2009


e.preventDefault();

YUI 3

✓Normalized subscription✓Normalized event handling✓DOM-like method names✓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

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

Custom Events

instance.myEvent.subscribe(doSomething);

YUI 2

this.myEvent.fire();


YUICONF 2009

Custom Events

YUI 2

instance.subscribe("myEvent",doSomething);

this.fireEvent("myEvent");


YUICONF 2009

Custom Events

instance.on("myEvent", doSomething);

YUI 3

this.fire("myEvent");


YUICONF 2009

this.publish("myEvent", config);

Custom Events


YUI 3



YUICONF 2009

Y.extend( MyClass, Y.EventTarget );

Y.EventTarget

✓ Event API


YUICONF 2009

Y.extend( MyClass, Y.Base );

Y.EventTarget

✓ Event API

Y.Base

✓ Event API

✓ Attributes

✓ Plugins


YUICONF 2009

Y.extend( MyClass, Y.Widget );

Y.EventTarget

✓ Event API

Y.Base

✓ Event API

✓ Attributes

✓ Plugins

Y.Widget

✓ Event API

✓ Attributes

✓ Plugins

✓ UI Lifecycle


YUICONF 2009

Y.extend( MyClass, Y.Base );

Y.EventTarget

✓ Event API

Y.Base

✓ Event API

✓ Attributes

✓ Plugins

Y.Widget

✓ Event API

✓ Attributes

✓ Plugins

✓ UI Lifecycle


YUICONF 2009

✓DOM events

✓Custom events

Normalized subscription


button.on("click", doSomething);


YUICONF 2009

✓DOM events

✓Custom events

subscriptionUnified


button.on("click", doSomething);


YUICONF 2009

DOM Events Module/App Events

Event API

Your App


YUICONF 2009

DOMCustom Events


YUICONF 2009

Custom Events more DOM like

✓Unify Subscription API

- Default behaviors

- Bubbling


YUICONF 2009



- Default behaviors

- Bubbling

foo.on(event, fn)


YUICONF 2009



- Default behaviors

- Bubblingthis.publish(...)


YUICONF 2009


Default behaviors


YUICONF 2009


Custom Events

YUI 3




YUICONF 2009

initializer: function () {

this.publish("start", {

defaultFn: this._defStartFn

});

}

Default behaviors

this.publish( name, config );


YUICONF 2009

Default behaviors

initializer: function () { ... },

_defStartFn: function (e) {

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

this._disableControls();

this._getGoing(e.urgency);}


YUICONF 2009

e.timee.urgency

this.fire("start", payload);

Event payload


YUICONF 2009

e.timee.urgency

Event payload

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

_defStartFn

prevented?end yes

no


YUICONF 2009

function doSomething(e) {

if (e.urgency === 'ASAP') {

e.preventDefault();

}

}

Behavior is preventableprevented?


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)

initializer: function () { this.publish("add", { defaultFn: this._defAddFn });

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

cache.js


YUICONF 2009

Dogfood (nom)

initializer: function () { this.publish(ENTRY, { defaultFn: this._defEntryFn });

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

console.js


YUICONF 2009

Dogfood (nom)

initializer: function () { this.publish("request", { defaultFn: Y.bind("_defRequestFn", this), queuable:true }); ...}

datasource.js


YUICONF 2009

Dogfood (nom)

initializer: function () { this.publish(EV_MOUSE_DOWN, { defaultFn: this._defMouseDownFn, bubbles: true }); ...}

drag.js


YUICONF 2009

Dogfood (nom)

initializer: function () { this.publish(SYNC, { defaultFn: this._defSyncFn }); this.publish(POSITION_THUMB, { defaultFn: this._defPositionThumbFn });}

slider.js


YUICONF 2009

Dogfood (nom)

this.publish({

execute: { defaultFn : this._defExecFn },

shift : { defaultFn : this._defShiftFn },

add : { defaultFn : this._defAddFn },

promote: { defaultFn : this._defPromoteFn },

remove : { defaultFn : this._defRemoveFn }

});

async-queue.js


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>

<li>three</li>

<li>four</li>

<li>five</li>

<li>six</li>

Y.all('li') .on('click', sayHi);


YUICONF 2009

Event Delegation

<UL>

<li>one</li>

<li>two</li>

<li>three</li>

<li>four</li>

<li>five</li>

<li>six</li>

Y.all('li') .on('click', sayHi);

6 subscriptions


YUICONF 2009

Event Delegation

Y.one('ul') .on('click', sayHi);

<UL>

<li>one</li>

<li>two</li>

<li>three</li>

<li>four</li>

<li>five</li>

<li>six</li>


YUICONF 2009

Event Delegation

Y.one('ul') .on('click', sayHi);

1 subscription

<UL>

<li>one</li>

<li>two</li>

<li>three</li>

<li>four</li>

<li>five</li>

<li>six</li>


YUICONF 2009

Event Delegation

Y.one('ul').delegate( 'click',sayHi,'li');

<UL>

<li>one</li>

<li>two</li>

<li>three</li>

<li>four</li>

<li>five</li>

<li>six</li>


YUICONF 2009

Event Delegation

Y.one('ul').delegate( 'click',sayHi,'li');

1 subscription

<UL>

<li>one</li>

<li>two</li>

<li>three</li>

<li>four</li>

<li>five</li>

<li>six</li>


YUICONF 2009

Event Delegation

instance1

instance2

instance3

instance4

instance5

instance6

instance1.on('start', sayHi);







YUICONF 2009

Event Delegation

instance1

instance2

instance3

instance4

instance5

instance6







6 subscriptions


YUICONF 2009

Event Delegation

ManagerClass

instance1

instance2

instance3

instance4

instance5

instance6

Mgr.on('foo:start', sayHi);


YUICONF 2009

Event Delegation

ManagerClass

instance1

instance2

instance3

instance4

instance5

instance6


1 subscription


YUICONF 2009

Event Delegation

ManagerClass

instance1

instance2

instance3

instance4

instance5

instance6


1 subscription

initializer: function () { this.addTarget( this.get("host"); );}


YUICONF 2009

Dogfood

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

draggable.on('start', doSomething);

Drag and Drop


YUICONF 2009

Dogfood

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

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

Drag and Drop


YUICONF 2009

Dogfood

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

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

Y.Global


YUICONF 2009




✓Bubbling


YUICONF 2009

DOMCustom Events


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

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

on()++


YUICONF 2009

on()++

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


YUICONF 2009

on()++

instance.on("start", 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

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

on()++


YUICONF 2009

on()++

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


YUICONF 2009

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

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

Above and beyond

✓Subscription context override

✓Subscription payload

- Easy event detach


- New DOM events


YUICONF 2009

button.detach("click", doSomething);

Handles and categories


YUICONF 2009



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


YUICONF 2009




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


YUICONF 2009




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

instance

event

_defEventFn

instance.on(event,handler)


YUICONF 2009

instance

event

_defEventFn


instance.after(event,handler)


YUICONF 2009

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

After moments

Y.Base

✓ Event API

✓ Attributes

✓ Plugins


YUICONF 2009

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

After moments

Side effects of a state change

Y.Base

✓ Event API

✓ Attributes

✓ Plugins


YUICONF 2009

instance

event

_defEventFn




YUICONF 2009

instance

event

_defEventFn



State UNCHANGED


YUICONF 2009

instance

event

_defEventFn



State UNCHANGED

Change state


YUICONF 2009

instance

event

_defEventFn



State UNCHANGED

Change state

State CHANGED


YUICONF 2009


YUICONF 2009

Above and beyond




✓ "After" subscriptions

- New DOM events


YUICONF 2009

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

on: function (type, handler, ctx) {

}

}

DOM++


YUICONF 2009

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

}

Konami


YUICONF 2009

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;}

Konami


YUICONF 2009

node.on('konami', addUnicorns);

Using your event


YUICONF 2009

Above and beyond





✓New DOM events


YUICONF 2009

Summary✓Unified subscription


✓Bubbling

✓Context override




✓New DOM events

DOMCustom 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/


http://www.redandgreen.org/R2Kphotos2.htm

http://www.redandgreen.org/R2Kphotos2.htm

http://www.vinylrecords.ch/B/BE/Beatles/

http://www.vinylrecords.ch/B/BE/Beatles/

http://www.flickr.com/photos/farewell_goodnight/214712018/

http://www.flickr.com/photos/farewell_goodnight/214712018/

http://www.flickr.com/photos/docman/2948845217/

http://www.flickr.com/photos/docman/2948845217/

http://www.flickr.com/photos/yabanji/3175297773/

http://www.flickr.com/photos/yabanji/3175297773/

http://www.flickr.com/photos/webmonk/16592171/

http://www.flickr.com/photos/webmonk/16592171/

http://www.flickr.com/photos/dark_hylian/56050955/

http://www.flickr.com/photos/dark_hylian/56050955/

http://www.flickr.com/photos/techthis/3528776386/

http://www.flickr.com/photos/techthis/3528776386/

yui 3: events evolved

Technology

dosomething yuiconf

preventdefault yuiconf

dom yuiconf

false yuiconf

dosomething e

preventdefaulte yuiconf

context yuiconf

firemyevent yuiconf