javascript 监听事件

今天接触了事件监听，下午写出来了，洗澡的时候回想了好久居然又不甚明白。下面梳理下：

先来个简单版的，严格来说不算是监听，但是方便理解。

class Listener = {
    constructor {
    this.listeners = [ ]; //这是储存监听事件的容器；
}
    subscribe ( functionName ) {
        this.listeners.push( functionName ); //把要监听的事件加入容器里
        return () {
            this.listener.filter( l => l!==functionName ) //确保没有重复的
        }
    }
    emit () {
        this.listeners.forEach( listener => listener() ) //我每次emit的时候都把监听的事件都跑一次
    }
}
let myListener = new Listener();
let myFunction = () => { console.log('success subscribed' ) }
myListener.subscribe(myFunction);

当我每次emit的时候，myFunction都被调用一次。

myListener.emit()

结果会是'success subscribed' 。

下面来个真正的监听

class Listener = {
    constructor {
            this._listeners = new Map(); //这是储存监听事件的容器,由于是个Map, 所以可以储存不同的事件；
    }
    subscribe ( label, callback ) {  //监听的事件( label )以及相应的回调函数
                this._listeners.has(label) || this._listeners.set(label, []);
		this._listeners.push( callback ); //把要监听的事件加入容器里</span>
		this._listener.filter( l => l !== callback ) //确保没有重复的callback
		}
    emit (label , ...arguments) {
		let listeners = this._listener.get( label ) //找到要监听的事件( label )
		if (listeners && listeners.length) { //确保listeners不是undefined
			listeners.forEach( listener => listener( arguments ) ) //我每次emit一个事件的时候都把监听的事件都跑一次
                        return true;
		}
                return false;
    }
}

let myListener = new Listener();

let myFunction = () => { console.log('success subscribed' ) }

myListener.subscribe( 'onprogress', myFunction);

myListener.subscribe( 'done', myFunction);

当我每次emit的时候，myFunction都被调用一次。

myListener.emit( 'onprogress' ,a, b, c);

结果会是success subscribed， 我监听的done是没有反应的。

所以监听就是某些事件被触发的时候，做点事情。