自定义事件 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 { ???????constructor() { ???????????this.evt = document.createEvent("HTMLEvents") ???????} ???????on(type, fn) { ???????????this.evt.initEvent(type, false, false); ???????????document.addEventListener(type, () => { ???????????????fn(this.data) ???????????}, false) ???????} ???????emit(type, data) { ???????????this.data = data ???????????document.dispatchEvent(this.evt) ???????} ???} ???const evt = new EventEmitter() ???evt.on(‘abc‘, (data) => { ???????console.log(data) // {a: 1} ???}) ???evt.emit(‘abc‘, { a: 1 })

// 如下 ???class EventEmitter { ???????constructor() { ???????????// 统计事件map ???????????this.evts = new Map ???????} ???????// 注册事件 ???????on(type, fn) { ???????????let evt = document.createEvent("HTMLEvents") ???????????evt.initEvent(type, false, false) ???????????this.evts.set(type, { evt, fn }) ???????????document.addEventListener(type, () => fn(this.data), false) ???????} ???????// 触发事件 ???????emit(type, data) { ???????????if (!this.evts.has(type)) { ???????????????return false ???????????} ???????????this.data = data ???????????document.dispatchEvent(this.evts.get(type).evt) ???????} ???????// 删除事件 ???????remove(type) { ???????????document.removeEventListener(type, this.evts.get(type).fn, false) ???????????this.evts.delete(type) ???????} ???} ???const evt = new EventEmitter() ???evt.on(‘abc‘, (data) => { ???????console.log(‘abc‘, data) ???}) ???evt.on(‘aaa‘, (data) => { ???????console.log(‘aaa‘, data) ???}) ???evt.emit(‘aaa‘, { aaa: 1 }) // aaa {aaa: 1} ???evt.emit(‘abc‘, { a: 1 }) ?//abc {a: 1} ?????evt.emit(‘abc‘, { ddf: 1 }) //abc { ddf: 1 }

　　　evt.emit(‘ffg‘, { ddd: 1 }) ?// 无打印
 　　evt.remove(‘abc‘) ?// 删除
　　　evt.emit(‘abc‘, 111) // 无打印