title: 自定义事件
date: 2017-06-06 15:36:04
tags: 自定义事件

js的自定义事件

code

function EventTarget() {
    this.handlers = {};
}

EventTarget.prototype = {
    constructor: EventTarget,
    addHandler: function(type, handler) {
        if (typeof this.handlers[type] == 'undefined') {
            this.handlers[type] = [];
        }
        this.handlers[type].push(handler);
    },
    fire: function(type, event) {
        if (!event.target) {
            event.target = this;
        }
        if (this.handlers[type] instanceof Array) {
            var handlers = this.handlers[type];
            for (var i = 0, len = handlers.length; i < len; i++) {
                handlers[i](event);
            }
        }
    },
    remove: function(type, handler) {
        if (this.handlers[type] instanceof Array) {
            var handlers = this.handlers[type];
            for (var i = 0, len = handlers.length; i < len; i++) {
                if (handlers[i] === handler) {
                    break;
                }
            }
            handlers.splice(i, 1);
        }
    }
};

usage

var target = new EventTarget();
//事件处理函数
function fn(event){
  console.log(event);
}
//注册事件
target.addHandler('testEvent', fn);
//触发事件
target.fire('testEvent', {name : 'Cloud'});//第二个参数是传递的内容,可自定义

用处

• 可以用于界面间的传值
• 创建松耦合的代码