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

4 篇文章 0 订阅
3 篇文章 0 订阅

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
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值