自定义实现一个JS事件系统

• 自定义Event类，它的eventArr属性用于存放所有注册成功的自定义事件，这是一个事件容器。
• 原型链上的 on() 方法，用于绑定一个自定义事件，这类事件可以被多次触发。
• 原型链上的 once() 方法，用于绑定只能被触发一次的自定义事件。
• 原型链上的 off() 方法，用于解绑指定的自定义事件。
• 原型链上的 emit() 方法，用于触发事件模型中的指定类型的自定义事件。

function Event() {
  this.eventArr = []
}

// on() 方法，用于绑定一个自定义事件
Event.prototype.on = function(eventType, callbackFn) {
  this.eventArr.push({
    eventType,
    callbackFn,
    once: false,
    done: false
  })
}

// once() 方法，用于绑定只能触发一次的自定义事件
Event.prototype.once = function(eventType, callbackFn) {
  this.eventArr.push({
    eventType,
    callbackFn,
    once: true,
    done: false
  })
}

// off() 方法，用于解绑自定义事件
Event.prototype.off = function(eventType, callbackFn) {
  this.eventArr.map((ele,idx)=>{
    if(ele.eventType === eventArr && ele.callbackFn === callbackFn) {
      this.eventArr.splice(idx, 1)
    }
  })
}

// emit() 方法，用于触发事件模型中指定类型的自定义事件
Event.prototype.emit = function(eventType) {
  this.eventArr.map((ele,idx) => {
    if (ele.eventType === eventType) {
      if(!ele.done) {
        ele.callbackFn()
        if(ele.once) {
          this.eventArr[idx].done = true  // 把once注册的事件，标记为“done”
        }
      }
    }
  })
}

测试一下这个自定义的事件系统，测试代码如下：

// 创建事件系统实例
const myEvent = new Event()

function fn1() {
  console.log(1)
}
function fn2() {
  console.log(2)
}
function fn3() {
  console.log(3)
}

// 注册3个 click 事件
myEvent.on('click', fn1)
myEvent.on('click', fn2)
myEvent.once('click', fn3)   // 只会被触发一次

// 注册1个 tap 事件
myEvent.once('tap', fn3)

// 连接两次触发 click事件
myEvent.emit('click')
myEvent.emit('click')

// 连接两次触发 tap事件
myEvent.emit('tap')
myEvent.emit('tap')

本篇结束！！！