2019年7月3日星期三今日计划

学习自定义事件
总结文档
完成进度

自定义事件
事件是什么？

事件是JavaScript和浏览器交互的主要途径。
事件是一种叫做观察者的设计模式，这是一种叫做创建松散耦合代码的技术。

对象可以发布事件，用来表示该对象生命周期某个有趣的时刻要来了。然后其他对象可以观察该对象，等待这些有趣的时刻到来并运行代码。
观察者模式由两类对象组成：主体和观察者。

主体主要负责发布事件，同时观察者通过订阅这些事件来观察主体。该模式的一个关键概念是主体并不知道观察者的任何事情，也就是说可以独立存在并正常运行即使观察者不存在。
观察者知道主体并能注册事件的回调函数（事件处理程序）。

涉及DOM上时，DOM便是主体，你的事件处理代码便是观察者。

事件是与DOM交互最常见的方式，但它们也可以用于非DOM代码中——通过实现自定义事件。自定义事件背后的概念是创建一个管理事件的对象，让其他对象监听那些事件。实现此功能的基本模式可以如下定义：

//自定义事件
function EventTarget(){
    //用来储存事件处理程序
    this.handlers = {}
}

EventTarget.prototype = {
    constructor: EventTarget,
    //用于注册给定类型的事件的事件处理程序
    addHandler: function(type,handler){
        //这里的this是？
        console.log(this);
        if(typeof this.handlers[type] == 'undefined'){
            this.handlers[type] = []
        }
        this.handlers[type].push(handler);
    },
    //用于触发一个事件
    fire: function(event){
        if(!event.target){
            event.target = this;
        }
        if(this.handlers[event.type] instanceof Array){
            var handlers = this.handlers[event.type];
            for(var i=0;i<handlers.length;i++){
                handlers[i](event);
            }
        }
    },
    //用于注销某个事件类型的事件处理程序
    removeHandler: function(type,handler){
       if(this.handlers[type] instanceof Array){
            var handlers = this.handlers[event.type];
            for(var i=0;i<handlers.length;i++){
                if(handlers[i] === handler){
                    break;
                }
            }
            handlers.splice(i,1);
       } 
    }
}

function handleMessage(event){
    console.log('Message Received',event.message);
}
//创建一个新对象
var target = new EventTarget();
//添加一个事件处理程序
target.addHandler('message',handleMessage);
//触发事件
target.fire({type: "message",message:"Hello,World!"});
//删除事件处理程序
//target.removeHandler('message',handleMessage);

//再次调应用程序
//target.fire({type: "message",message:"Hello,World!"});

完成进度：50%

2019年7月3日 星期三 今日计划

猜你喜欢

2019年7月3日星期三今日计划