More than you want to know about YUI 3 Custom Events

Luke Smith

@ls_n

(Click)

slideNode.on('click', function () {
    slideshow.next();
});
        

target.on(object)

Y.on({
    click: next,

    keydown: function (e) {
        if (e.keyCode === 37) {
            previous();
        } else if (e.keyCode === 39) {
            next();
        }
    }
});
        

target.on(array, ...)

(synthetic events via gallery-event-nav-keys)

Y.one('win').on(['click', 'right'], next);
        

Wait, this is about Custom Events.

Custom events for realz!

Notifications (simple)

Y.on('hello', callback);

// No publishing required
Y.fire('hello');
        

Notification data

Y.on('hello', function (message) {
    show("Hello?\n" + message);
});

Y.fire('hello', "Is it me you're looking for?");
        

EventTarget + class

function Band(name) { ... }

Y.augment(Band, Y.EventTarget);

var mrT = new Band("Mr. T's bluegrass band");

mrT.on('foo', function () { ... });

mrT.fire('foo');
        

EventTarget + object

var myCat = {
    name: 'Tank',
};

Y.augment(myCat, Y.EventTarget);

myCat.fire('meow');
        

The cool kids publish(...)

emitFacade

myCat.publish('scratch', {
    emitFacade: true
});

myCat.on('scratch', function (e) {
    show("Please don't " + e.type);
});

myCat.fire('scratch');
        

Event facade payload

myCat.on('scratch', function (e) {
    show("Not the " + e.object + "!");
});

myCat.fire('scratch', { object: 'couch' });
        

EventTarget config

Y.augment(myCat, Y.EventTarget, true, null, {
    emitFacade: true,
    prefix: 'cat'
});

myCat.on('hork', function (e) { ... });

myCat.fire('hork');
        

defaultFn

myCat.publish('hork', {
    defaultFn: function (e) {
        show(e.location + " is now stained.");
    }
});

myCat.on('hork', function (e) {
    e.preventDefault();
    show("Oh no you don't!");
});

myCat.fire('hork', { location: 'quilt' });
        

target.after(...)

myCat.after('hork', function (e) {
    show("My " + e.location + " is ruined!");
});
        

preventable

myCat.publish('hork', {
    defaultFn: ...,
    preventable: false
});

myCat.fire('hork', { location: 'new shirt' });
        

preventedFn

myCat.publish('hork', {
    defaultFn: ...,
    preventedFn: function () {
        this.fire('scratch', {
            object: 'hand'
        });
    }
});

myCat.fire('hork', { location: 'crib' });
        

fireOnce

softcell.publish("hit", {
    fireOnce: true
});

softcell.on("hit", profit);

// YES
softcell.fire("hit", { song: "Tainted Love" });
// NO
softcell.fire("hit", { song: "Bedsitter" });
        

broadcast: 1

Y.augment(Band, Y.EventTarget, true, null {
    emitFacade: true,
    prefix: 'band'
});

var rebecca = new Band("Rebecca Black");
rebecca.publish("song", {
    broadcast: 1
});

Y.on('band:song', launchMeme);
        

broadcast: 2

beatles.publish('song', {
    broadcast: 2
});

Y.Global.on('band:song', buyAlbum);

YUI().use('node', function (Y2) {
    Y2.Global.on('band:song', changeChannel);
});

beatles.fire("song", { name: "Revolution" });
        

bubbles

milliVanilli.publish("song", {
    bubbles: true,
    defaultFn: ...
});

milliVanilli.addTarget(agent);

milliVanilli.scandal = true;

agent.on('band:song', function (e) {
    e.preventDefault();
});
        

e.stopPropagation()

milliVanilli.on("song", function (e) {
    e.stopPropagation();
});
        

stoppedFn

milliVanilli.publish("song", {
    ...
    stoppedFn: function () { ... }
});
        

async

metallica.publish('concertstart', {
    fireOnce: true,
    async: true
});

metallica.on('concertstart', function () {
    show("\m/");
});

myApp.fire('concertstart');

show("Are you ready to Rock?!");
        

Time!

Homework

• silent
• queuable
• defaultTargetOnly
• context
• contextFn
• signature
• monitored
• AOP/duck punching via on(...), before(...), and after(...)
• more...

slideshow.fire('end', {
    message: 'Thank you',
    contact: {
        name   : 'Luke Smith',
        twitter: '@ls_n'
    },
    source: 'GitHub repo'
});