一个支持事件event的自定义EventTarget类型

EventTarget

关键字：自定义的类型，支持事件
实现此EventTarget的目的是为了更好地理解事件event的实现机制。要实现这个机制，就应当实现几个主要的接口分别是

1. addListener：根据监听事件的类型，添加listener函数，对于监听同一事件的所有listener函数，应该在监听到事件的时候执行所有的listener函数，故简单地将这些listener放在一个数组中。
2. removeListener：根据监听事件的类型，从listeners数组中删除这个listener，达到目的。
3. fire ：参数为监听类型，和listener的参数传递。

addListener

    addListener: function (type, listener) {
 "use strict";
        //创建一个数组如果不存在的话
        if (!this.hasOwnProperty("_listener")) {
            this._listener = [];
        }
        //不存在事件
        if (typeof this._listener[type] == "undefined") {
            this._listener[type] = [];
        }
        this._listener[type].push(listener);//事件数组中添加listener
    },

removeListener

  removeListener: function (type, listener) {
 "use strict";
        if (this._listener && this._listener[type] instanceof Array) {
            var listeners = this._listener[type];
            //等于listeners.splice(listeners.indexOf(listener),1);
            for (var i = 0, len = listeners.length; i < len; i++) {
                if (listeners[i] === listener) {
                    listeners.splice(i, 1);
                    break;
                }
            }
        }
    }

fire

    fire: function (event) {
 "use strict";
        if (!event.target) {
            event.target = this;
        }
        if (!event.type) {
            throw  new Error("Event Object missing 'type' ")
        }
        if (this._listener && this._listener[event.type] instanceof Array) {
            var listeners = this._listener[event.type];
            listeners.forEach(function (listener) {
                listener.call(this, event);
            })
        }
    },

所有代码为：

/** * Created by bamboo on 2016/4/12. */

//一个支持事件event的EventTarget类型
function EventTarget() {
 "use strict";
}

EventTarget.prototype = {
    constructor: EventTarget,
    addListener: function (type, listener) {
 "use strict";
        //创建一个数组如果不存在的话
        if (!this.hasOwnProperty("_listener")) {
            this._listener = [];
        }
        //不存在事件
        if (typeof this._listener[type] == "undefined") {
            this._listener[type] = [];
        }
        this._listener[type].push(listener);//事件数组中添加listener
    },
    fire: function (event) {
 "use strict";
        if (!event.target) {
            event.target = this;
        }
        if (!event.type) {
            throw  new Error("Event Object missing 'type' ")
        }
        if (this._listener && this._listener[event.type] instanceof Array) {
            var listeners = this._listener[event.type];
            listeners.forEach(function (listener) {
                listener.call(this, event);
            })
        }
    },
    removeListener: function (type, listener) {
 "use strict";
        if (this._listener && this._listener[type] instanceof Array) {
            var listeners = this._listener[type];
            //等于listeners.splice(listeners.indexOf(listener),1);
            for (var i = 0, len = listeners.length; i < len; i++) {
                if (listeners[i] === listener) {
                    listeners.splice(i, 1);
                    break;
                }
            }
        }
    }
};

测试

//test
var target = new EventTarget();
target.addListener("message", function (event) {
 "use strict";
    console.log("message is : ", event.data);
});
target.fire({
    type: 'message',
    data: "Hello World"
});

测试结果

"E:\Program Files (x86)\JetBrains\WebStorm 10.0.4\bin\runnerw.exe" "E:\Program Files\nodejs\node.exe" EventTarget.js
message is :  Hello World

Process finished with exit code 0