YUI3 Infrastructure下的 EventTarget

 

YUI自定义事件系统允许你使用自定义事件，并且这些事件的可用性比DOM中的事件更高--事件具体到你程序中定义的。用户自定义事件和DOM事件工作非常像。可以冒泡，传递事件等，也可以抑制默认事件行为的传递，及其他。与自定义事件相关的API由EventTarget类提供。其他的基础类继承自EventTarget类，如果你只需要用户自定义事件API，你可以直接扩展或者扩充你自己的类

 

YUI().use('event-custom', function (Y) {
    
});

 

Y.on('anyOldNameYouWant', function () {
    alert("Looky there!");
});

// Group subscriptions by passing an object or array to on()
Y.on({
    somethingImportant: updateCalendar,
    birthday          : eatCake,
    weekendEnd        : backToTheGrindstone
});

// Some events have prefixes
Y.once("fuji:available", climb);

// Custom events have distinct "after" moments
Y.after("spa-category|pedicure", gelatoTime);

Firing Events

// All subscribers to the myapp:ready event will be executed
Y.fire('myapp:ready');

// Pass along relevant data to the callbacks as arguments
Y.fire('birthday', {
    name: 'Walt Disney',
    birthdate: new Date(1901, 11, 5)
});

  

回调参数和facade 事件

/ Simple notification events don't send event objects, only fire() data
Y.on('talkie', function (data) {
    alert('(' + data.time + ') Walkie ' + data.message);
    // data.preventDefault is not defined. data is just a plain object
});

Y.fire('talkie', {
    message: 'roger, over.',
    time: new Date()
});

// Events configured to emitFacade will send an event object, merged with
// fire() data
Y.publish('bill:due', {
    emitFacade: true,
    defaultFn : payUp
});

Y.on('bill:due', function (e) {
    // Event facades have standard properties and methods as well as properties
    // from payload data passed to fire()
    if (e.payee === 'Rich Uncle Sal') {
        e.preventDefault(); // the `payUp` method won't be called (Sal can wait)
    }
});

// Objects passed as the second argument to fire() for facade events will have
// their properties merged onto the facade received by the callback.
Y.fire('bill:due', {
    payee: 'Great Aunt Myra',
    amount: 20
});

EventFacade类

使用emitfacade设置为真，就是包裹并保护一个自定义事件。需要event-custom-complex模块

继承 EventTarget

function MyClass() {
    /* insert constructor logic here */
}

MyClass.prototype = {
    add: function (item) {
        // You can assume the APIs are available from your class instances
        this.fire("addItem", { item: item });
    },
    ...
};

// Make MyClass an EventTarget
Y.augment(MyClass, Y.EventTarget);

var instance = new MyClass();
instance.on('addItem', function (e) {
    alert("Yay, I'm adding " + e.item);
});

instance.add('a new item'); // ==> "Yay, I'm adding a new item"

添加默认行为

  格式：_def(the name of the event)Fn.

function TreeNode(name) {
    this.name   = name;
    this._items = [];

    // Event publishing is typically done during instantiation
    this.publish('add', {
        defaultFn: this._defAddFn
    });
}

// Adding a child node is an interesting mutation operation. Move the mutation
// logic from the method to a mutation event's default behavior
TreeNode.prototype.add = function (node) {
    this.fire('add', { newNode: node });
};

// Default functions receive the event facade like other subscribers
TreeNode.prototype._defAddFn = function (e) {
    this._items.push(e.newNode);

    e.newNode.addTarget(this);
};

...

branchA.add(leaf1); // without 'add' subscriptions, the behavior is the same

其它请参考：http://yuilibrary.com/yui/docs/event-custom/