<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
addeventlistener('click',fn)
@click=fn
$emit('事件名称'，'事件内容')
-->
<script type="text/javascript">
// obj.addlistener('click',fn1)
// obj.addlistener('click',fn2)
// obj.addlistener('click',fn3)
//
// obj.emit('click','事件内容')
var obj = {
eventFns:{
// click:[fn1,fn2,fn3]
},
addListener:function(eventName,fn){
if(this.eventFns[eventName]){
this.eventFns[eventName].push(fn)
}else{
this.eventFns[eventName] = []
this.eventFns[eventName].push(fn)
}
},
emit:function(eventName,content){
this.eventFns[eventName].forEach(function(item){
item(content)
})
},
removeListener:function(eventName,fn){
var index = this.eventFns[eventName].indexOf(fn)
if(index!=-1){
this.eventFns[eventName].splice(index,1)
}
}
}
obj.addListener('click',function(e){
console.log(e)
console.log('这是订阅者1')
})
obj.addListener('click',function(e){
console.log(e)
console.log('这是订阅者2')
})
var fn1 = function(){
console.log('这是订阅者3')
}
obj.addListener('click',fn1)
obj.removeListener('click',fn1)
obj.emit('click',{
eventname:'click',
timestamp:new Date()
})
document.querySelector('body').removeEventListener('事件名称',fn1)
</script>
</body>
</html>
