面向对象开发之自定义事件

Posted 2020-12-18 yxfboke

class Event {
  constructor(){
    this.handlers = {}; // 记录所有的事件及处理函数
    // {
    //   click: [fn1, fn2],
    //   mouseover: [fn3, fn4],
    // };
    
  }

  /**
   * on 添加事件监听
   * @param type    要添加的事件类型
   * @param handler 要添加的的事件处理函数
   * @param once    是否只执行一次
   */
  on(type, handler, once = false) {
    if (!this.handlers[type]) {
      this.handlers[type] = [];
    }

    if (this.handlers[type].includes(handler)) {
      this.handlers[type].push(handler);
      handlers.once = once;
    }
  }

  /**
   * off取消事件监听
   * @param type    要取消的事件类型
   * @param handler 要取消的事件处理函数，如果不传则清除该类型所有函数
   */
  off(type, handler) {
    if (this.handlers[type]) {
      if (handler === undefined) {
        this.handlers[type] = [];
      } else {
        this.handlers[type] = this.handlers[type].filter(f => f !== handler)
      }
    }
  }

  /**
   * once 该函数只执行一次
   * @param type    要添加的事件类型
   * @param handler 要添加的的事件处理函数
   */
  once() {
    this.on(type, handler, true);
  }

  /**
   * trigger 执行该函数
   * @param type      要执行的函数类型
   * @param eventData 事件对象
   * @param point this执行
   */
  trigger(type, eventData = {}, point = this) {
    if (this.handlers[type]) {
      this.handlers[type].forEach((f) => {
        f.call(point, eventData);
        if (f.once) {
          this.off(type, f);
        }
      })
    }
  }

}

let el = new Event();
el.on(‘click‘, fn);
function fn() {
  console.log(‘11‘);    
}