自定义事件 js

// 原理如下
// 创建 类型为HTMLEvents的事件
var evt = document.createEvent("HTMLEvents");
// 初始化 自定义eee 事件
evt.initEvent("eee", false, false);

// 事件绑定
document.addEventListener("eee", function(e) {
  console.log(e)
})

// document标签触发事件（直接运行代码触发）

document.dispatchEvent(evt);

 

 二、不使用标签

class EventEmitter {
  events = {}
  emit(key, ...data) {
    if (this.events[key]) {
      this.events[key].forEach(it => it(...data))
    }
  }

  on(key, fn) {
    if (!this.events[key]) {
      this.events[key] = []
    }
    this.events[key].push(fn)
  }

  off(key, fn) {
    if (!this.events[key]) {
      return false
    }
    if (!fn) {
      return (this.events[key] = null)
    }

　　　this.events[key] = this.events[key].filter(it => it !== fn)

  }
}