JavaScriptでイベント機能を追加するmixin

(・Θ・) oO( mixinと言うのかどうかよくわかんないけど。 )

単純にonとtriggerだけ。イベントは完全一致で検索するので（手抜き）、例えばchange:nameはchangeでは拾えない。

デモ

• http://jsfiddle.net/ginpei/Kd8S9/

コード

lib/eventer.js

// By Takanashi Ginpei; MIT License
/**
 * 
 * イベントまわりの処理。
 * @mixin
 * @sample
 * var obj = _.extend({}, _eventer, {
 *   // …
 * });
 *
 * obj.on('foo', function(a, b) {
 *   console.log(a, b, this.c);  // 'A', true, 123
 * }, { c:123 });
 * obj.trigger('A', true);
 */
var _eventer = {
    _listeners: null,

    /**
     * イベントを発火させる。
     * @param {String} type
     */
    trigger: function(type /* , ... */) {
        if (this._listeners && type in this._listeners) {
            var args = Array.prototype.slice.call(arguments, 1);
            var listeners = this._listeners[type];
            for (var i=0, l=listeners.length; i<l; i++) {
                listeners[i].apply(this, args);
            }
        }
    },

    /**
     * イベントを監視する。
     * @param {String} type
     * @param {Function} listeners
     * @param {Object} [context]
     */
    on: function(type, listener, context) {
        if (context) {
            listener = listener.bind(context);
        }

        if (!this._listeners) {
            this._listeners = {};
        }

        if (!(type in this._listeners)) {
            this._listeners[type] = [];
        }

        this._listeners[type].push(listener);
    }
};

lib/eventer.min.js

// By Takanashi Ginpei; MIT License
var _eventer={_listeners:null,trigger:function(e){if(this._listeners&&e in this._listeners){var t=Array.prototype.slice.call(arguments,1);var n=this._listeners[e];for(var r=0,i=n.length;r<i;r++){n[r].apply(this,t)}}},on:function(e,t,n){if(n){t=t.bind(n)}if(!this._listeners){this._listeners={}}if(!(e in this._listeners)){this._listeners[e]=[]}this._listeners[e].push(t)}}

使用例

demo/timer.js

// イベント処理を持つオブジェクト
var timer = Object.create(_eventer);
timer.startedAt = Date.now();
timer.el = document.getElementById('timer');
timer.update = function() {
    var elTimer = this.el;
    if (elTimer.firstChild) {
        elTimer.removeChild(elTimer.firstChild);
    }
    elTimer.appendChild(document.createTextNode(Date.now()-this.startedAt));
};

// イベント発火時の処理
timer.on('changetime', timer.update, timer);

// 定期的にイベント発火
setInterval(function() {
    timer.trigger('changetime');
}, 1);