原生js实现自定义事件

原生js实现自定义事件

用JavaScript的话来说，观察者模式的实质就是你可以对程序中某个对象的状态进行观察，并且在其发生改变时能够得到通知。

利用观察者模式可以很容易的实现自定义事件，具体代码如下：

var Event=function() {
this.subscibers={};//保存事件的回调函数
};
Event.prototype={
constructor:Event,//保持原型链的完整
on:function(type,callback) {  //绑定事件
this.subscibers[type]=[];
this.subscibers[type].push(callback);
} else {
this.subscibers[type].push(callback);
}
},
off:function(type) {  //移除事件
this.subscibers[type]=[];
},
emit:function(type) { //触发事件
var t=this;
if(typeof this.subscibers[type]=='object') {
this.subscibers[type].forEach(function(fn,i) {
fn.call(t);
});
}
}
};

var s=new Event();
s.title='测试自定义事件';

s.on('change.title',function() {
console.log(this.title);
});

s.setTitle=function(value) {
this.title=value;
this.emit('change.title')
};

s.setTitle('属性发生了变化');

使用自定义事件，可以很容易实现面向对象的编程方式，并且在对象的状态发生改变时，重新进行模板的渲染。