一個支持事件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